Skip to main content
CircularProgressBar is an indeterminate loading spinner. It animates continuously while mounted and does not accept a progress value. Use ProgressBar when you can report a percentage.

Usage

The application controls loading by mounting or removing the indicator. Keep an explanatory label beside it. The SVG does not supply an accessible name or live region and does not forward native attributes; apply those to a wrapper.

Appearance

size sets the width and height in pixels and defaults to 50. barWidth defaults to 5; keep it smaller than half the size. barColor accepts a CSS color and defaults to currentColor, so it inherits the surrounding text color. Theme variables work as color values, for example var(--t-font-color-secondary).

Props

string
default:"currentColor"
CSS stroke color. Defaults to the inherited text color.
number
default:"5"
Stroke width in pixels. Keep it smaller than half of size.
number
default:"50"
Width and height of the spinner in pixels.