Progress
A progress element that can be used to show the progress of a task.
+
Tailwind and Alpine
Copied!
<div x-data="{
progress: 0,
progressInterval: null,
}"
x-init="
progressInterval = setInterval(() => {
progress = progress + 1;
if (progress >= 100) {
clearInterval(progressInterval);
}
}, 100);
"
class="relative w-full h-3 overflow-hidden rounded-full bg-neutral-100">
<span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 ease-linear bg-neutral-900" x-cloak></span>
</div>Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| progress | The progress percentage of the progress bar |
| The progress percentage of the progress bar | |
| progressInterval | The interval of the progress bar, will be cleared after reaching 100% |
| The interval of the progress bar, will be cleared after reaching 100% |
More Examples
Below you will find more Progress examples you may wish to use in your projects.
Copied!
<div x-data="{
progress: 0,
progressInterval: null,
}"
x-init="
progressInterval = setInterval(() => {
progress = progress + 1;
if (progress >= 100) {
clearInterval(progressInterval);
}
}, 100);
"
class="relative w-full h-2 overflow-hidden bg-gray-100 rounded-full">
<span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 bg-blue-600 ease"></span>
</div>
