Skip to content

Radial progress

Use the radial progress component to show task progress or the passage of time.

Radial progress documentation

Class names

  • component: radial-progress

Syntax

<div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>

Rules

  • The --value CSS variable and the text must contain a number from 0 through 100.
  • Add aria-valuenow={value} and role="progressbar". These attributes let screen readers identify the progress element and read its value.
  • Use a div instead of a progress tag. Browsers cannot show text in a progress tag.
  • Use --size to set the size. The default is 5rem. Use --thickness to set the indicator thickness.