Progress Bar

Progress indicator bar

Preview

Progress (75%) 75%

Success (90%) 90%

Warning (45%) 45%

Danger (20%) 20%

View Code

<div>
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
    </div>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
    </div>
</div>