Progress is installed into your project as a file you own. It takes the same props as Ant Design v6's Progress and adds none. The kit changes three things: the status icons come from your icon pack, the value text animates when the status changes, and the tooltip on a circle of 20px or less uses the kit's small tooltip.
Install
npx antuikit@latest init
npx antuikit@latest add progress
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/progress, never from antd. The file lives in your project, so the import is a path, not a package.
import { Progress } from "@/components/ui/progress"
The axes
The enumerated props and their values. type and status come first, since they decide which of the rest apply.
type takes line (the default), circle and dashboard. Size pairs and percentPosition only work on a line, and gapDegree and gapPlacement only on the round types.
status takes normal, active, success and exception. With no status, a bar at 100 is success, and a bar with success.percent checks that number instead of percent.
strokeLinecap takes butt, square and round (the default). On a line, butt and square give the same flat end. A circle with a gradient ignores it.
gapPlacement takes top, bottom, start and end, and follows the writing direction. The deprecated gapPosition does not. A dashboard defaults to bottom at 75 degrees.
percentPosition takes { type, align }: inner or outer, aligned start, center or end. Plain line only, and inner needs a size tall enough for text.
size takes a preset (small or medium, with default deprecated), a number, a [width, height] pair or a { width, height } object. The last two are for bars only, and on a circle they warn at runtime rather than failing to compile.
Flags
Progress has one boolean, plus a prop that acts like one.
showInfo (default true) shows the value text or the status icon. Turned off, only a screen reader gets the number, so put it in text nearby.
steps changes the bar into segments. Then an array strokeColor colors each segment, and percentPosition stops applying.
Slots
Two props take a node, and only one of them shows.
format receives (percent, successPercent) and returns what the value slot shows. It replaces the status icon too, so return an icon from it if you still want one.
children is in the type but is never shown. Use format instead.
Events
Progress has no event props. Everything it passes to its root element is in the API table below.
Styling
classNames and styles take the same five keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Progress
2
classNames={{
3
root: "…",
4
body: "…",
5
rail: "…",
6
track: "…",
7
indicator: "…",
8
}}
9
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Progress
Progress's props. Rows marked antuikit in the Version column are added by the kit.