@kit-ng-ui/progress

Progress indicator for Kit UI. Mirrors ant-design's <Progress>.

Install

pnpm add @kit-ng-ui/progress @kit-ng-ui/core @kit-ng-ui/icons

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/progress/styles' as progress;

Use

import { KitProgressComponent } from '@kit-ng-ui/progress';

@Component({
  standalone: true,
  imports: [KitProgressComponent],
  template: `
    <kit-progress [percent]="40" />
    <kit-progress [percent]="70" status="active" />
    <kit-progress [percent]="100" status="success" />
    <kit-progress [percent]="50" status="exception" />

    <kit-progress [percent]="60" [steps]="5" />

    <kit-progress type="circle" [percent]="75" [width]="120" />
    <kit-progress type="dashboard" [percent]="45" [width]="140" />

    <kit-progress
      [percent]="60"
      [strokeColor]="{ '0%': '#5b21b6', '100%': '#22c55e' }"
    />
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ---------------- | ----------------------------------------------- | ------------ | ------------------------------------------------------------------------ | | type | 'line' \| 'circle' \| 'dashboard' | 'line' | Variant. | | percent | number (0–100) | 0 | Current value, clamped to [0, 100]. | | successPercent | number \| null | null | Reserved for the success-overlay on line bars. | | status | 'normal' \| 'active' \| 'success' \| 'exception' | null (auto) | Overrides the colour + icon; auto-success when percent hits 100. | | showInfo | boolean | true | Toggles the trailing percent text / status icon. | | size | 'default' \| 'small' | 'default' | Thicker / thinner bar. | | strokeWidth | number (px) | 0 (auto) | Overrides bar height. | | strokeColor | string \| { '0%': … , '100%': … } | null | Solid colour or a gradient map. Gradient on circle uses the first stop. | | trailColor | string \| null | null | Reserved for a custom trail / background colour. | | steps | number | 0 | Render n discrete cells instead of a continuous bar (line only). | | width | number (px) | 120 | Diameter of the circle / dashboard. | | format | (p: number) => string | null | Custom text formatter; status icons take priority over text. |