Progress
Component for rendering linear or circular progress using Kikita UI tokens.
Import the public component from the published package entrypoint.
import { KuiProgressComponent } from '@kikita-labs/ui';Set value from 0 to 100 for determinate progress. Omit value, or pass null, for indeterminate progress.
Determinate (60%)
Indeterminate
<div class="progress-example">
<div class="progress-example__item">
<span class="progress-example__label">Determinate (60%)</span>
<kui-progress [value]="60" aria-label="Upload progress" />
</div>
<div class="progress-example__item">
<span class="progress-example__label">Indeterminate</span>
<kui-progress aria-label="Loading" />
</div>
</div>Set type to circular for a ring indicator. Projected content renders centered inside the ring.
72%
<div class="progress-circular-example">
<kui-progress type="circular" size="lg" color="success" [value]="72" aria-label="72% complete">
72%
</kui-progress>
<kui-progress type="circular" aria-label="Loading" />
</div>size controls linear thickness or circular diameter. color sets the semantic intent of the indicator.
<div class="progress-color-size-example">
<div class="progress-color-size-example__group">
<kui-progress size="xs" [value]="40" aria-label="Extra small progress" />
<kui-progress size="sm" [value]="40" aria-label="Small progress" />
<kui-progress size="md" [value]="40" aria-label="Medium progress" />
<kui-progress size="lg" [value]="40" aria-label="Large progress" />
<kui-progress size="xl" [value]="40" aria-label="Extra large progress" />
</div>
<div class="progress-color-size-example__group">
<kui-progress color="primary" [value]="55" aria-label="Primary progress" />
<kui-progress color="success" [value]="55" aria-label="Success progress" />
<kui-progress color="warning" [value]="55" aria-label="Warning progress" />
<kui-progress color="danger" [value]="55" aria-label="Danger progress" />
<kui-progress color="neutral" [value]="55" aria-label="Neutral progress" />
</div>
</div>Inputs verified against @kikita-labs/ui v1.6.1 v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| type | 'linear' | 'circular' | 'linear' | Progress shape. |
| value | number | null | null | Progress value from 0 to 100. Values are clamped visually. null renders the indeterminate animation. |
| color | 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'primary' | Semantic color. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Linear thickness or circular diameter. |
| content projection | text | template | - | Projected content is rendered centered inside circular progress. |
Progress sets the ARIA progressbar role and range attributes automatically, but the accessible name is the consumer's responsibility.
- The host sets
role="progressbar",aria-valuemin="0", andaria-valuemax="100". - Determinate progress additionally sets
aria-valuenowfrom value. - Indeterminate progress (
valueomitted ornull) does not setaria-valuenow, matching native indeterminate semantics. - Always provide an accessible name with
aria-labeloraria-labelledby. Progress does not infer one from projected content.