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 `5rem`.
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.
For accessibility, a role of 'progressbar' is given to each <div> explicitly, while
<progress> receives this role implicitly.
| 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%
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
