To create a circular progress bar, add role="progressbar" to an HTML element. Also,
inline add a CSS variable with the target value: style="--value: 66".
To make it more accessible, add some ARIA attributes:
aria-valuenow: The value of the progress bar.aria-valuemin: The minimum value of the progress bar.aria-valuemax: The maximum value of the progress bar.
You can specify how the thickness of the progress bar by setting the --thickness
custom property to one of these values: var(--thick), var(--medium) (default),
or var(--thin).
<div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"></div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"></div>
<div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"></div>
<div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"></div>