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.
Requires Alpine JS
This component requires Alpine JS v3 to function properly. Some advanced features may require additional Alpine plugins (such as focus).
Tell Me MoreDefault 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.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%"></div>
</div><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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%"></div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
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.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
<span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span><span>20%</span>
</div>
</div><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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
<span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span><span>20%</span>
</div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
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
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
</div>
</div>
</div>
<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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:20%">
</div>
</div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Progress bar color variants
Examples of progress bars with different color variants.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- 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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
<!-- 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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:40%">
</div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Multiple progress bars
A progress bar with multiple values.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`"style="width:20%" role="progressbar" aria-label="progress bar A" x-bind:aria-valuenow="currentValA" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`"style="width:30%" role="progressbar" aria-label="progress bar B" x-bind:aria-valuenow="currentValB" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`"style="width:25%" role="progressbar" aria-label="progress bar C" x-bind:aria-valuenow="currentValC" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><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="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`"style="width:20%" role="progressbar" aria-label="progress bar A" x-bind:aria-valuenow="currentValA" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`"style="width:30%" role="progressbar" aria-label="progress bar B" x-bind:aria-valuenow="currentValB" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`"style="width:25%" role="progressbar" aria-label="progress bar C" x-bind:aria-valuenow="currentValC" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Gradient progress bars
A progress bar with a gradient background.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind: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" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"style="width:70%"></div>
</div>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
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. |