Radial progress

ADMIN PANEL

Radial progress

You can use Radial progress bar adding class .radial-progress on <div> tag

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

Different values

You can give differs value by setting value="" attribute

Preview Html
0%
21%
65%
87%
100%
 <div class="flex flex-wrap items-center justify-center gap-2">
<div class="radial-progress" style="--value:0;">0%</div>   
  <div class="radial-progress" style="--value:21;">21%</div>   
  <div class="radial-progress" style="--value:65;">65%</div>   
  <div class="radial-progress" style="--value:87;">87%</div>   
  <div class="radial-progress" style="--value:100;">100%</div>  
</div>

Different colors

You can give differs colors by adding .text-* attribute

Preview Html
80%
80%
80%
80%
80%
  <div class="flex flex-wrap items-center justify-center gap-2">
<div class="radial-progress text-primary" style="--value:80;">80%</div>   
  <div class="radial-progress text-secondary" style="--value:80;">80%</div>   
  <div class="radial-progress text-success" style="--value:80;">80%</div>   
  <div class="radial-progress text-waring" style="--value:80;">80%</div>   
  <div class="radial-progress text-info" style="--value:80;">80%</div>  
</div>

With Label

You can give differs value by setting value="" attribute

Preview Html
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" 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" 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" 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" 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" 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" style="--value:97;"> 97% </div>
       <span> 97% </span>
   </div>
</div>

Custom size and custom thickness

You can use customize size by adding style=" --value: **; --size: **; --thickness: **;"

Preview Html
70%
70%
70%
70%
70% 
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="radial-progress radial-xs text-primary" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-sm text-primary" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-md text-primary" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-lg text-primary" style="--value:70;"> 70% </div>
   <div class="radial-progress radial-xl text-primary" style="--value:70;"> 70% </div>
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now