Radial Progress

Radial

Add radial progress using .radial-progress class.

70% 
 <div class="flex flex-wrap items-center justify-center gap-2">
   <div class="radial-progress text-primary" style="--value:70;"> 70% </div>
</div>

Different Radial

Use radial progress With the help of .radial-progress class with different value.

0%
15%
40%
65%
95%
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="radial-progress" style="--value:0;  class="dark:bg-sidebar-dark2 "> 0% </div>
   <div class="radial-progress" style="--value:15; class="dark:bg-sidebar-dark2 "> 15% </div>
   <div class="radial-progress" style="--value:40; class="dark:bg-sidebar-dark2 "> 40% </div>
   <div class="radial-progress" style="--value:65; class="dark:bg-sidebar-dark2 "> 65% </div>
   <div class="radial-progress" style="--value:95; class="dark:bg-sidebar-dark2 "> 95% </div>
</div>

Colored Radial

Adding colored radial progress with help of .radial-progress & .text-* class with different value.

5%
25%
57%
78%
88%
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="radial-progress radial-sm dark:bg-sidebar-dark2 text-primary" style="--value:5;  " "> 5% </div>
   <div class="radial-progress radial-sm dark:bg-sidebar-dark2 text-secondary" style="--value:25;  " "> 25% </div>
   <div class="radial-progress radial-sm dark:bg-sidebar-dark2 text-info" style="--value:57;  " "> 57% </div>
   <div class="radial-progress radial-sm dark:bg-sidebar-dark2 text-success" style="--value:78;  " "> 78% </div>
   <div class="radial-progress radial-sm dark:bg-sidebar-dark2 text-warning" style="--value:88;  " "> 88% </div>
</div>

Radial Label

Add colored radial progress bar with label.

5%
25%
57%
78%
88%
97% 
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="flex flex-col items-center justify-center gap-2 text-primary">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:5;"></div>
       <span> 5% </span>
   </div>
   <div class="flex flex-col items-center justify-center gap-2 text-secondary">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:25;"> 25% </div>
       <span> 25% </span>
   </div>
   <div class="flex flex-col items-center justify-center gap-2 text-info">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:57;"> 57% </div>
       <span> 57% </span>
   </div>
   <div class="flex flex-col items-center justify-center gap-2 text-success">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:78;"> 78% </div>
       <span> 78% </span>
   </div>
   <div class="flex flex-col items-center justify-center gap-2 text-warning">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:88;"> 88% </div>
       <span> 88% </span>
   </div>
   <div class="flex flex-col items-center justify-center gap-2 text-danger">
       <div class="radial-progress bg-gray-light dark:bg-sidebar-dark2" style="--value:97;"> 97% </div>
       <span> 97% </span>
   </div>
</div>

Sizing Radial

Add radial progress using .radial-progress class.

70%
70%
70%
70%
70% 
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="radial-progress radial-xs text-primary dark:bg-sidebar-dark2" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-sm text-primary dark:bg-sidebar-dark2" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-md text-primary dark:bg-sidebar-dark2" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-lg text-primary dark:bg-sidebar-dark2" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-xl text-primary dark:bg-sidebar-dark2" style="--value:70;"> 70% </div>
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode