Progress
Component for rendering linear or circular progress using Kikita UI tokens.
Import the public component from the published package entrypoint.
import { KuiProgress } from '@kikita-labs/ui';Set value from 0 to 100 for determinate progress. Omit value, or pass null, for indeterminate progress.
<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.
<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>Set defaults.progress once for the application or for a subtree. Each option resolves as local input > defaults.progress.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
progress: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Component size. Takes precedence over the global defaults.size. |
| color | 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | — | Default colour role. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-progress-circular-label-color | CSS custom property | --kui-color-text | Circular label color |
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-progress-height | CSS custom property | 6px (xs 2px, sm 4px, md 6px, lg 8px) | Linear track thickness |
Inputs verified against @kikita-labs/ui v2.0.0 v2.0.0 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. A static numeric attribute is coerced; null or an invalid value renders the indeterminate animation. |
| color | 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | undefined | undefined | Semantic color of the filled part. Falls back to defaults.progress.color, then primary. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined | undefined | Linear thickness or circular diameter. Falls back to defaults.progress.size, then the root size default, then md. |
| content projection | text | template | - | Projected content is rendered centered inside circular progress. |
| KuiProgressOptions | interface | - | Shape of defaults.progress: size and color. |
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. - Progress is covered by the library forced-colors stylesheet (
@media (forced-colors: active)), so the indicator stays visible. - Always provide an accessible name with
aria-labeloraria-labelledby. Progress does not infer one from projected content.
Consumer-visible changes of @kikita-labs/ui 2.0 for Progress.
- The component class is
KuiProgress; theComponentsuffix is gone. - Size and colour defaults moved to
provideKuiDefaults({ progress: { size, color } }); the inputs are nowundefineduntil set. - A static numeric
valueattribute is coerced and an invalid value renders the indeterminate state. - Progress supports
forced-colors. - The linear thickness is
--kui-progress-heightand the circular label colour is--kui-progress-circular-label-color.