Ui3nProgress

Progress components for displaying loading and completion states.

Ui3nProgressLinear

Linear progress bar component.

Props

Name	Type	Default	Description
value	string | number | undefined	0	Progress value
height	string | number | undefined	2	Progress height
withText	boolean | undefined	false	Whether to show text
bgColor	string | undefined	—	Background color
color	string | undefined	—	Progress color
indeterminate	boolean | undefined	false	Whether progress is indeterminate

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-progress-linear-bg	var(--color-bg-control-primary-default)
--ui3n-progress-linear-color	var(--color-bg-control-accent-default)
--ui3n-progress-linear-font-size	10px
--ui3n-progress-linear-height	2px
--ui3n-progress-linear-label-font-size	14px
--ui3n-progress-linear-label-line-height	16px

Ui3nProgressCircular

Circular progress indicator component.

Props

Name	Type	Default	Description
value	string | number | undefined	0	Progress value
size	string | number | undefined	64	Progress size
width	string | number | undefined	—	Progress width
withText	boolean | undefined	false	Whether to show text
bgColor	string | undefined	—	Background color
color	string | undefined	—	Progress color
indeterminate	boolean | undefined	false	Whether progress is indeterminate

Usage Examples

Linear progress

Linear progress

Basic linear progress bar with value

30%

Linear progress indeterminate

Linear progress indeterminate

Indeterminate linear progress for unknown duration

Circular progress

Circular progress

Circular progress indicator with value

45%

Circular progress indeterminate

Circular progress indeterminate

Indeterminate circular progress for unknown duration