Progress indicators

Usage

<CircularProgress value={0.75} />
<CircularProgress indeterminate />
<LinearProgress value={0.75} />
<LinearProgress indeterminate />

Four colors

<CircularProgress fourColor indeterminate />
<LinearProgress fourColor indeterminate />

Circular progress

<CircularProgress indeterminate />
<CircularProgress value={0.4} />

Linear progress

<LinearProgress indeterminate />
<LinearProgress value={0.4} />

Buffer

<LinearProgress value={0.5} buffer={0.8} />

Theming

Circular progress tokens

Token	Default value
`--np-circular-progress-color`	`--np-color-primary`
`--np-circular-progress-active-indicator-width`	`8.3333`
`--np-circular-progress-size`	`3rem`

Circular progress example

<CircularProgress
	--np-circular-progress-color="var(--np-color-error)"
	--np-circular-progress-active-indicator-width="20"
	--np-circular-progress-size="5rem"
	indeterminate
/>

Linear progress tokens

Token	Default value
`--np-linear-progress-track-shape`	`0`
`--np-linear-progress-track-height`	`0.25rem`
`--np-linear-progress-active-indicator-height`	`0.25rem`
`--np-linear-progress-active-indicator-color`	`--np-color-primary`
`--np-linear-progress-track-color`	`--np-color-surface-container-highest`

Linear progress example

<LinearProgress
	--np-linear-progress-active-indicator-color="var(--np-color-error)"
	--np-linear-progress-track-shape="0.5rem"
	--np-linear-progress-track-height="0.5rem"
	--np-linear-progress-active-indicator-height="0.5rem"
	indeterminate
/>

API

Circular progress attributes

Attribute	Type	Default	Description
`value`	`number`	`0`	Progress to display, a fraction between 0 and `max`
`max`	`number`	`1`	Maximum progress to display, defaults to 1.
`indeterminate`	`boolean`	`false`	Whether or not to display indeterminate progress, which gives no indication to how long an activity will take.
`fourColor`	`boolean`	`false`	Whether or not to render indeterminate mode using 4 colors instead of one.

Circular progress bindables

Attribute	Type	Description
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.

Linear progress attributes

Attribute	Type	Default	Description
`value`	`number`	`0`	Progress to display, a fraction between 0 and `max`
`max`	`number`	`1`	Maximum progress to display, defaults to 1.
`indeterminate`	`boolean`	`false`	Whether or not to display indeterminate progress, which gives no indication to how long an activity will take.
`fourColor`	`boolean`	`false`	Whether or not to render indeterminate mode using 4 colors instead of one.
`buffer`	`number`	`0`	Buffer amount to display, a fraction between 0 and `max`. If the value is 0 or negative, the buffer is not displayed.

Linear progress bindables

Attribute	Type	Description
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.