Progress Radial

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

javascript

import { ProgressRadial } from '@brainandbones/skeleton';

Remove the value property to set to indeterminate mode.

Usage

let valuePercent: number = 50; // %

html

<ProgressRadial value={valuePercent} stroke={20}>{valuePercent}%</ProgressRadial>

Prop	Type	Default	Description
value	number	-	Set the meter fill amount. Shows as indeterminate when set undefined.
stroke	number	20	Sets the base stroke width. Scales responsively.
meter	string	stroke-black dark:stroke-white	Provide classes to set meter color.
track	string	stroke-surface-300 dark:stroke-surface-700	Provide classes to set track color.
color	string	fill-black dark:fill-white	Provide classes to set the SVG text fill color.
font	string	56	Sets the base font size. Scales responsively.

Name	Description
default	Text content is rendered as SVG text in the center of the element.

Prop	Required	Description
label	-	A semantic ARIA label.