-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Radial Progress
Radial
You can use add radial progress using .radial-progress class.
70%
<div class="flex items-center justify-center flex-wrap gap-2">
<div class="radial-progress text-primary" style="--value:70;"> 70% </div>
</div>
Different Radial
You can use add radial progress using .radial-progress class with differnt value.
0%
15%
40%
65%
95%
<div class="flex items-center justify-center flex-wrap gap-2">
<div class="radial-progress" style="--value:0;"> 0% </div>
<div class="radial-progress" style="--value:15;"> 15% </div>
<div class="radial-progress" style="--value:40;"> 40% </div>
<div class="radial-progress" style="--value:65;"> 65% </div>
<div class="radial-progress" style="--value:95;"> 95% </div>
</div>
Colored Radial
You can use add colored radial progress using .radial-progress & .text-* class with differnt value.
5%
25%
57%
78%
88%
<div class="flex items-center justify-center flex-wrap gap-2">
<div class="radial-progress radial-sm text-primary" style="--value:5;"> 5% </div>
<div class="radial-progress radial-sm text-secondary" style="--value:25;"> 25% </div>
<div class="radial-progress radial-sm text-info" style="--value:57;"> 57% </div>
<div class="radial-progress radial-sm text-success" style="--value:78;"> 78% </div>
<div class="radial-progress radial-sm text-warning" style="--value:88;"> 88% </div>
</div>
Radial Label
You can use add colored radial progress with label.
<div class="flex items-center justify-center flex-wrap gap-2">
<div class="flex flex-col justify-center items-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 justify-center items-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 justify-center items-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 justify-center items-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 justify-center items-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 justify-center items-center gap-2 text-danger">
<div class="radial-progress bg-gray-light" style="--value:97;"> 97% </div>
<span> 97% </span>
</div>
</div>
Radial
You can use add radial progress using .radial-progress class.
70%
70%
70%
70%
70%
<div class="flex items-center justify-center flex-wrap gap-2">
<div class="radial-progress text-primary" style="--value:70;"> 70% </div>
</div>