Progress
Tailwind CSS and Alpine JS Progress
Progress bars are a great way to indicate the status of a process. They can be used to indicate loading, uploading, downloading and more.
Default progress bar
A progress bar with a percentage value. You can use this component with or without Alpine JS; simply toggle Alpine off to get the Tailwind CSS-only version.
HTML
<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
</div>
</div>Progress bar with label inside
A progress bar with a percentage value displayed inside the bar. Similar to the default progress bar, you can use this component with or without Alpine JS.
HTML
<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
<span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span><span>20%</span>
</div>
</div>Progress bar with label outside
A progress bar with a percentage value displayed outside the bar. Similar to the default progress bar, you can use this component with or without Alpine JS.
Progress
HTML
<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="">
<div class="">
<span>Progress</span>
<span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span><span>20%</span>
</div>
<div class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
</div>
</div>
</div>
Progress bar color variants
Examples of progress bars with different color variants.
HTML
<!-- Primary Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- Secondary Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- Success Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- Info Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- Warning Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- Danger Progress Bar -->
<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
Multiple progress bars
A progress bar with multiple values.
HTML
<div x-data="{ currentValA: 20, currentValB: 30, currentValC: 25 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`"style="width:20%" role="progressbar" aria-label="progress bar A" :aria-valuenow="currentValA" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`"style="width:30%" role="progressbar" aria-label="progress bar B" :aria-valuenow="currentValB" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`"style="width:25%" role="progressbar" aria-label="progress bar C" :aria-valuenow="currentValC" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>Gradient progress bars
A progress bar with a gradient background.
HTML
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
Data
List of all Alpine JS data used in this component.
| Property | Description |
|---|---|
| currentVal |
Number - Current value |
| minVal |
Number - Minimum Value. If currentVal is equal to this amount, then progress would be 0% |
| maxVal |
Number - Maximum Value. If currentVal is equal to this amount, then progress would be 100% |
| calcPercentage() |
Function - Calculates the progress percentage based on the minimum, maximum, and current value. |