# antuikit / Progress

> Progress with status icons from your icon pack and an animated indicator.

Docs: https://antuikit.com/docs/components/progress

## Install

npx antuikit@latest init
npx antuikit@latest add progress

## Import

import { Progress } from "@/components/ui/progress";

## Demos

- [Line](https://ui.antuikit.com/embed/progress/line.md): A `Progress` bar fills to `percent` with the value at its end, and `status` marks it active, done or failed.
- [Mini size](https://ui.antuikit.com/embed/progress/line-mini.md): Set `size="small"` for a thinner bar with smaller text, for a narrow column or a table cell.
- [Size](https://ui.antuikit.com/embed/progress/size.md): Set `size` to a preset, a `[width, height]` pair or `{ height }` to change a bar's thickness, from a hairline to a thick bar.
- [Status icons](https://ui.antuikit.com/embed/progress/status.md): Set `status` to `"success"` or `"exception"` to show a check or a cross from your icon pack, on bars and circles.
- [Custom colors](https://ui.antuikit.com/embed/progress/custom-colors.md): Set `strokeColor` to any CSS color, like a theme variable, for a state `status` has no value for, such as a warning.
- [Gradient](https://ui.antuikit.com/embed/progress/gradient.md): Pass `strokeColor` a `{ from, to }` pair or percentage stops to fill a bar or a circle with a gradient.
- [Stroke linecap](https://ui.antuikit.com/embed/progress/linecap.md): Set `strokeLinecap` to `"butt"` or `"square"` for flat ends on a dashboard or circle, in place of the round cap.
- [Labeled task](https://ui.antuikit.com/embed/progress/labeled.md): Set `showInfo={false}` and write your own label and status line around the bar, like a file name and time remaining.
- [Info position](https://ui.antuikit.com/embed/progress/info-position.md): Set `percentPosition` to put the value inside the bar or at its start or end, and give an inner value a taller `size`.
- [Custom format](https://ui.antuikit.com/embed/progress/format.md): Pass `format` a function to write the value your way, like 6 GB or 75 days, and it replaces the status icon too.
- [Dynamic](https://ui.antuikit.com/embed/progress/dynamic.md): Change `percent` at runtime and the bar and circle animate, turning to success at 100 when no `status` is set.
- [Steps](https://ui.antuikit.com/embed/progress/steps.md): Set `steps` to split the bar into segments, and pass `strokeColor` an array to color each segment on its own.
- [Success segment](https://ui.antuikit.com/embed/progress/segment.md): Set `success.percent` to draw a second, darker run inside the bar, like tasks done inside tasks started.
- [Driven by a slider](https://ui.antuikit.com/embed/progress/slider.md): A Slider and a Progress bar share one `percent` state, so dragging the slider fills the bar.
- [Circle](https://ui.antuikit.com/embed/progress/circle.md): Set `type="circle"` for a ring with the value in the middle, or a check or cross when `status` says so.
- [Small circles](https://ui.antuikit.com/embed/progress/circle-mini.md): Set `size` on a circle to a number or `"small"` to shrink it, for a card, a list row or a table cell.
- [Tiny circle](https://ui.antuikit.com/embed/progress/circle-micro.md): A circle with a `size` of 20 or less hides its text and shows `format` in a tooltip, for a status next to a label.
- [Circle with steps](https://ui.antuikit.com/embed/progress/circle-steps.md): Pass `steps` to a circle or dashboard to split the ring, with `{ count, gap }` to set how many segments and how far apart.
- [Dashboard](https://ui.antuikit.com/embed/progress/dashboard.md): Set `type="dashboard"` for a ring with a gap, and move the gap with `gapPlacement` or widen it with `gapDegree`.
- [Upload panel](https://ui.antuikit.com/embed/progress/upload-panel.md): A sync panel with a bar for each file on its own timer and a circle for the overall progress, where one file fails.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/progress`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Progress` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.