Circular progress

wu-progress-circle is a ring that fills to a percentage. It is not a native element, so give it role="progressbar", a label and the aria-value* attributes, and set --wu-progress-circle--Value (0 to 100) to the same value.

Class or variable	Effect
`wu-progress-circle`	Root. 4rem ring, brand fill
`wu-progress-circle-label`	Part. Value text in the center
`success`, `danger`, `warning`, `info`	Role fill
`sm`, `lg`	2.5rem and 6rem, with a thinner and thicker ring
`animated`	The ring eases to each new value, opt-in
`--wu-progress-circle--Value`	Filled percentage, 0 to 100
`--wu-progress-circle--Size`	Width and height, for every size
`--wu-progress-circle--Thickness`	Ring thickness

The fill uses currentcolor, so a CSS color on the ring also sets it.

Default

72%

<div class="wu-progress-circle" role="progressbar" aria-label="Upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 72">
  <span class="wu-progress-circle-label">72%</span>
</div>

Roles

100%

40%

80%

95%

<div class="flex wrap x-center gap-4">
  <div class="wu-progress-circle success" role="progressbar" aria-label="Tasks done" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 100"><span class="wu-progress-circle-label">100%</span></div>
  <div class="wu-progress-circle info" role="progressbar" aria-label="Sync" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 40"><span class="wu-progress-circle-label">40%</span></div>
  <div class="wu-progress-circle warning" role="progressbar" aria-label="Storage" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 80"><span class="wu-progress-circle-label">80%</span></div>
  <div class="wu-progress-circle danger" role="progressbar" aria-label="Quota" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 95"><span class="wu-progress-circle-label">95%</span></div>
</div>

Sizes and thickness

25%

50%

75%

60%

<div class="flex wrap x-center gap-4">
  <div class="wu-progress-circle sm" role="progressbar" aria-label="Small" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 25"><span class="wu-progress-circle-label">25%</span></div>
  <div class="wu-progress-circle" role="progressbar" aria-label="Default" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 50"><span class="wu-progress-circle-label">50%</span></div>
  <div class="wu-progress-circle lg" role="progressbar" aria-label="Large" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 75"><span class="wu-progress-circle-label">75%</span></div>
  <div class="wu-progress-circle" role="progressbar" aria-label="Thin" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 60; --wu-progress-circle--Thickness: 2px"><span class="wu-progress-circle-label">60%</span></div>
</div>

Animation

animated (or wu-animated on an ancestor) eases the ring to each new value when your script updates --wu-progress-circle--Value. Reduced motion turns it off.

<div class="wu-progress-circle animated" role="progressbar" aria-label="Upload"
  aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 72">
  <span class="wu-progress-circle-label">72%</span>
</div>

Forced colors

In forced-colors mode the ring keeps a visible track and fill from the system colors.

Load only the progress circle

@use "@wovenui/components/progress-circle";

The progress circle needs no other component.