Progress

Circular Indeterminate

Circular Determinate

Linear Indeterminate

Linear Determinate

`<flint-circular-progress>`

flint-circular-progress: a circular progress indicator (spinner).

import 'flint-ui'; // auto-registers all
// or
import { FlintCircularProgress } from 'flint-ui';

html

<flint-circular-progress></flint-circular-progress>

Property	Attribute	Type	Default	Description
`variant`	`variant`	`'determinate' \| 'indeterminate'`	`'indeterminate'`	Progress variant: determinate shows a specific value, indeterminate shows an animation.
`value`	`value`	`number`	`0`	Current progress percentage (0-100) for determinate mode.
`size`	`size`	`number`	`40`	Diameter of the circular indicator in pixels.
`thickness`	`thickness`	`number`	`3.6`	Stroke width of the circle in pixels.
`color`	`color`	`'primary' \| 'success' \| 'error' \| 'warning'`	`'primary'`	Color theme of the progress indicator.
`label`	`label`	`string`	`''`	Accessible label for the progress indicator.

Property	Default
`--flint-circular-progress-size`	—
`--flint-circular-progress-color`	—
`--flint-circular-progress-thickness`	`3.6`
`--flint-primary-color`	—
`--flint-primary-color-light`	—

flint-linear-progress: a horizontal progress bar.

import 'flint-ui'; // auto-registers all
// or
import { FlintLinearProgress } from 'flint-ui';

html

<flint-linear-progress></flint-linear-progress>

Property	Attribute	Type	Default	Description
`variant`	`variant`	`'determinate' \| 'indeterminate'`	`'indeterminate'`	Progress variant: determinate shows a specific value, indeterminate shows an animation.
`value`	`value`	`number`	`0`	Current progress value (0-100).
`height`	`height`	`number`	`4`	Height of the progress bar in pixels.
`color`	`color`	`'primary' \| 'success' \| 'error' \| 'warning'`	`'primary'`	Color theme of the progress bar.
`label`	`label`	`string`	`''`	Accessible label for the progress bar.

Property	Default
`--flint-linear-progress-height`	—
`--flint-linear-progress-bg`	—
`--flint-linear-progress-color`	—