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 flex-row">
<div class="flex-shrink max-w-full px-4 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 justify-center items-center 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="flex-shrink max-w-full px-4 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 justify-center items-center 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 overflow-hidden bg-indigo-100 rounded mb-4">
<div class="flex flex-col justify-center overflow-hidden 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 overflow-hidden bg-red-100 rounded mb-4">
<div class="flex flex-col justify-center overflow-hidden 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 overflow-hidden bg-yellow-100 rounded mb-4">
<div class="flex flex-col justify-center overflow-hidden 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 overflow-hidden bg-green-100 rounded mb-4">
<div class="flex flex-col justify-center overflow-hidden 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 flex-row -mx-4">
<!-- Vertical Progress Bar -->
<div class="flex-shrink w-1/4 px-4 max-w-full text-center">
<div class="flex flex-col flex-nowrap justify-end bg-indigo-500 dark:bg-opacity-40 h-48 rounded mb-4">
<div class="relative bg-indigo-700" style="height:73%"><span class="w-full text-white pt-2 absolute left=0 right-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="flex-shrink w-1/4 px-4 max-w-full text-center">
<div class="flex flex-col flex-nowrap justify-end bg-red-500 dark:bg-opacity-40 h-48 rounded mb-4">
<div class="relative bg-red-700" style="height:53%"><span class="w-full text-white pt-2 absolute left=0 right-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="flex-shrink w-1/4 px-4 max-w-full text-center">
<div class="flex flex-col flex-nowrap justify-end bg-yellow-500 dark:bg-opacity-40 h-48 rounded mb-4">
<div class="relative bg-yellow-300" style="height:83%"><span class="w-full text-gray-800 pt-2 absolute left=0 right-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="flex-shrink w-1/4 px-4 max-w-full text-center">
<div class="flex flex-col flex-nowrap justify-end bg-green-500 dark:bg-opacity-40 h-48 rounded mb-4">
<div class="relative bg-green-700" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 right-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>