Radial progress

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

This page is not up to date. Some of the examples might not work as expected.

Class name	Type
radial-progress	Component	Shows a radial progress

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 need to use a div instead of the progress tag because browsers can’t show text inside progress tag, and Firefox doesn’t render pseudo-elements inside progress tag at all. Adding role="progressbar" makes it accessible to screen readers as well.

Radial progress

70%

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

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

            
                <div className="$$radial-progress" style={{ "--value": 70 }} role="progressbar">70%</div>

<div className="$$radial-progress" style={{ "--value": 70 }} role="progressbar">70%</div>

Different values

20%

60%

80%

100%

<div class="$$radial-progress" style="--value:0;" role="progressbar">0%</div>
<div class="$$radial-progress" style="--value:20;" role="progressbar">20%</div>
<div class="$$radial-progress" style="--value:60;" role="progressbar">60%</div>
<div class="$$radial-progress" style="--value:80;" role="progressbar">80%</div>
<div class="$$radial-progress" style="--value:100;" role="progressbar">100%</div>

<div class="$$radial-progress" style="--value:0;" role="progressbar">0%</div>
<div class="$$radial-progress" style="--value:20;" role="progressbar">20%</div>
<div class="$$radial-progress" style="--value:60;" role="progressbar">60%</div>
<div class="$$radial-progress" style="--value:80;" role="progressbar">80%</div>
<div class="$$radial-progress" style="--value:100;" role="progressbar">100%</div>

            
                <div className="$$radial-progress" style={{"--value":0}} role="progressbar">0%</div>
<div className="$$radial-progress" style={{"--value":20}} role="progressbar">20%</div>
<div className="$$radial-progress" style={{"--value":60}} role="progressbar">60%</div>
<div className="$$radial-progress" style={{"--value":80}} role="progressbar">80%</div>
<div className="$$radial-progress" style={{"--value":100}} role="progressbar">100%</div>

<div className="$$radial-progress" style={{"--value":0}} role="progressbar">0%</div>
<div className="$$radial-progress" style={{"--value":20}} role="progressbar">20%</div>
<div className="$$radial-progress" style={{"--value":60}} role="progressbar">60%</div>
<div className="$$radial-progress" style={{"--value":80}} role="progressbar">80%</div>
<div className="$$radial-progress" style={{"--value":100}} role="progressbar">100%</div>

Custom color

70%

<div class="$$radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>

<div class="$$radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>

            
                <div className="$$radial-progress text-primary" style={{ "--value": 70 }} role="progressbar">
  70%
</div>

<div className="$$radial-progress text-primary" style={{ "--value": 70 }} role="progressbar">
  70%
</div>

With background color and border

70%

<div
  class="$$radial-progress bg-primary text-primary-content border-primary border-4"
  style="--value:70;"
  role="progressbar">
  70%
</div>

<div
  class="$$radial-progress bg-primary text-primary-content border-primary border-4"
  style="--value:70;"
  role="progressbar">
  70%
</div>

            
                <div
  className="$$radial-progress bg-primary text-primary-content border-primary border-4"
  style={{ "--value": 70 }}
  role="progressbar">
  70%
</div>

<div
  className="$$radial-progress bg-primary text-primary-content border-primary border-4"
  style={{ "--value": 70 }}
  role="progressbar">
  70%
</div>

Custom size and custom thickness

70%

<div
  class="$$radial-progress"
  style="--value:70; --size:12rem; --thickness: 2px;"
  role="progressbar">
  70%
</div>
<div
  class="$$radial-progress"
  style="--value:70; --size:12rem; --thickness: 2rem;"
  role="progressbar">
  70%
</div>

<div
  class="$$radial-progress"
  style="--value:70; --size:12rem; --thickness: 2px;"
  role="progressbar">
  70%
</div>
<div
  class="$$radial-progress"
  style="--value:70; --size:12rem; --thickness: 2rem;"
  role="progressbar">
  70%
</div>

            
                <div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }} role="progressbar">70%</div>
<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }} role="progressbar">70%</div>

<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2px" }} role="progressbar">70%</div>
<div className="$$radial-progress" style={{ "--value": "70", "--size": "12rem", "--thickness": "2rem" }} role="progressbar">70%</div>