Progress
Documentation and examples for using custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Example
Example progress Circle
Progress with default percent
Progress with custom text
$9,450
Edit data-percent="--" for change percent. Add .custom-after classes for add custom text on center. Edit circle bg and fill color in svg circle .stroke-indigo-.
Edit source js in src/js/demo.js functions myCircleProgress();
<div class="flex flex-wrap klsuaonrmcha">
<div class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 mb-6">
<p class="text-center mb-5">Progress with default percent</p>
<!-- circle progress -->
<div class="circle-progress w-full h-40 px-3 flex yhansklopals layhetgsjdcb relative mx-auto" data-percent="83">
<svg class="absolute w-36 h-36" viewPort="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-indigo-100" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
<circle class="circle-fill stroke-indigo-400" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
</svg>
</div>
</div>
<div class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 mb-6">
<p class="text-center mb-5">Progress with custom text</p>
<!-- circle progress with custom text -->
<div class="circle-progress custom-after w-full h-40 px-3 flex yhansklopals layhetgsjdcb relative mx-auto" data-percent="43">
<svg class="absolute w-36 h-36" viewPort="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-red-100" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
<circle class="circle-fill stroke-red-400" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
</svg>
<span class="font-bold">$9,450</span>
</div>
</div>
</div>
Example
Example progress bar.
25%
45%
85%
95%
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-indigo-100 rounded-sm mb-4">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-indigo-400" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-red-100 rounded-sm mb-4">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-red-700" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-yellow-100 rounded-sm mb-4">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-gray-800 text-center whitespace-nowrap bg-yellow-300" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-green-100 rounded-sm mb-4">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-700" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
Vertical progress
Example vertical progress bar.
73%
UI/UX
53%
SEO
83%
Web
93%
Apps
<!-- vertical progress -->
<div class="flex flex-wrap klsuaonrmcha -mx-4">
<!-- Vertical Progress Bar -->
<div class="shrink w-1/4 uajskeiolksb max-w-full text-center">
<div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-indigo-500 dark:bg-indigo-500/40 h-48 rounded-sm mb-4">
<div class="relative bg-indigo-700" style="height:73%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">73%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">UI/UX</p>
</div>
<!-- Vertical Progress Bar -->
<div class="shrink w-1/4 uajskeiolksb max-w-full text-center">
<div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-red-500 dark:bg-red-500/40 h-48 rounded-sm mb-4">
<div class="relative bg-red-700" style="height:53%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">53%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">SEO</p>
</div>
<!-- Vertical Progress Bar -->
<div class="shrink w-1/4 uajskeiolksb max-w-full text-center">
<div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-yellow-500 dark:bg-yellow-500/40 h-48 rounded-sm mb-4">
<div class="relative bg-yellow-300" style="height:83%"><span class="w-full text-gray-800 pt-2 absolute left=0 end-0 py-1 font-bold">83%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Web</p>
</div>
<!-- Vertical Progress Bar -->
<div class="shrink w-1/4 uajskeiolksb max-w-full text-center">
<div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-green-500 dark:bg-green-500/40 h-48 rounded-sm mb-4">
<div class="relative bg-green-700" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">93%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Apps</p>
</div>
</div>