Progress Bar - Midone - Tailwind HTML Admin Template

<div class="w-full h-2 bg-gray-400 rounded-full">
    <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded-full mt-3">
    <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded-full mt-3">
    <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
</div>

Progressbar with Label

Show code

50%

60%

70%

<div class="w-full h-4 bg-gray-400 rounded">
    <div class="w-1/2 h-full bg-theme-1 rounded text-center text-xs text-white">50%</div>
</div>
<div class="w-full h-4 bg-gray-400 rounded mt-3">
    <div class="w-2/3 h-full bg-theme-1 rounded text-center text-xs text-white">60%</div>
</div>
<div class="w-full h-4 bg-gray-400 rounded mt-3">
    <div class="w-3/4 h-full bg-theme-1 rounded text-center text-xs text-white">70%</div>
</div>

Progressbar Height

Show code

<div class="w-full h-1 bg-gray-400 rounded-full">
    <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded mt-3">
    <div class="w-2/3 h-full bg-theme-1 rounded"></div>
</div>
<div class="w-full h-3 bg-gray-400 rounded mt-3">
    <div class="w-3/4 h-full bg-theme-1 rounded"></div>
</div>

Progressbar Color

Show code

<div class="w-full h-2 bg-gray-400 rounded-full">
    <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded mt-3">
    <div class="w-2/3 h-full bg-theme-9 rounded"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded mt-3">
    <div class="w-3/4 h-full bg-theme-12 rounded"></div>
</div>
<div class="w-full h-2 bg-gray-400 rounded mt-3">
    <div class="w-3/4 h-full bg-theme-6 rounded"></div>
</div>