Basic example

The progress component is mainly used to indicate the progress of a task, usually displayed as a progress bar.

Basic example 
<div class="h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-blue-500" style="width: 30.6%"></div>
</div>

Labels

Add labels to your progress bars by placing text within the bar itself.

Labels 
<div class="bg-light-200 text-center text-xs text-white dark:bg-dark-200 rounded overflow-hidden">
    <div class="bg-blue-500" style="width: 25%">25%</div>
</div>

Height

Use different sizes by with various sizing utility classes.

Height 
<div class="mb-4 h-0.5 bg-light-200 text-center text-xs text-white dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-blue-500" style="width: 25%"></div>
</div>

<div class="mb-4 h-1 bg-light-200 text-center text-xs text-white dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-1 bg-blue-500" style="width: 25%"></div>
</div>

<div class="mb-4 h-1.5 bg-light-200 text-center text-xs text-white dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-1.5 bg-blue-500" style="width: 25%"></div>
</div>

<div class="h-2 bg-light-200 text-center text-xs text-white dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-2 bg-blue-500" style="width: 25%"></div>
</div>

Colors

Make use of the .bg-* utility classes to change the color of the progressbar.

Colors 
<div class="mb-4 h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-blue-500" style="width: 30.6%"></div>
</div>

<div class="mb-4 h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-teal-500" style="width: 52.6%"></div>
</div>

<div class="mb-4 h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-red-500" style="width: 78.6%"></div>
</div>

<div class="mb-4 h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-cyan-500" style="width: 100%"></div>
</div>

<div class="mb-4 h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-orange-500" style="width: 65.6%"></div>
</div>

<div class="h-0.5 bg-light-200 dark:bg-dark-200 rounded overflow-hidden">
    <div class="h-0.5 bg-yellow-500" style="width: 23.6%"></div>
</div>