Radial progress

Radial progress can be used to show the progress of a task or to show the passing of time.

Radial progress needs --value CSS variable to work.
To change the size, use --size CSS variable which has a default value of 4rem.
To change the thickness, use --thickness CSS variable which is 10% of the size by default.

For radial progress we use <div> instead of <progress> tag because Browsers are unable to show the text inside <progress> tag and Firefox doesn't show the pseudo elements inside <progress> bar at all.
Class name
Type
radial-progress Component Shows a radial progress
# Radial progress
70%
# Different values
0%
20%
60%
80%
100%
# Custom color
70%
# With background color and border
70%
# Custom size and custom thickness
70%
70%