Progress Radials

Svelte Component

Displays a radial indicator showing the progress or completion of a task.

Examples

Determinate

50%

Indeterminate

Primary

Secondary

Tertiary

Success

Warning

Error

Getting Started

This component is treated as an ARIA meter.

typescript
let value: number = 50; // %
html
<ProgressRadial {value}>{value}%</ProgressRadial>

Indeterminate

Remove the value property or set to undefined.

html
<ProgressRadial />
html
<ProgressRadial value={undefined} />