A pregress bar, that’s what we are going to build.
When you are building a website, you will probably have to show a progress bar to your users for many different reasons. For example, you might want to show a progress bar to your users when they are uploading a file, or when they are downloading something. Some Use cases:
The important parts:
x-data="{ progress: 0, interval: null }"
is the data that will be used to store the progress value. x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }"
is the code that will be executed every 100ms to update the progress value. x-text="progress + '%'"
is the code that will be executed to display the progress value.x-bind:style="'width: ' + progress + '%;'"
is the code that will be executed to set the width of the progress bar.<div
x-data="{ progress: 0, interval: null }"
x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }">
<div
x-text="progress + '%'">
</div>
<div>
<div
x-bind:style="'width: ' + progress + '%;'"
>
</div>
</div>
</div>
The important parts:
w-full
is the width of the container.text-sm text-neutral-500
is the text color.bg-neutral-200
is the background color.rounded-full
is the border radius.h-2
is the height of the progress bar.transition-all
is the transition effect.ease-in-out
is the animation effect.duration-500
is the duration of the animation.cursor-pointer
is the cursor style.relative
is the positioning style.overflow-hidden
is the overflow style.<div
x-data="{ progress: 0, interval: null }"
x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }"
class="w-full">
<div
class="text-sm text-neutral-500"
x-text="progress + '%'">
</div>
<div class="relative h-2 mt-2 bg-neutral-200 rounded-full">
<div
x-bind:style="'width: ' + progress + '%;'"
class="absolute top-0 left-0 h-full bg-orange-500 rounded-full">
</div>
</div>
</div>
Well that was it! You can now use the progress bar in your project.
In this tutorial, we learned how to create a progress bar using Tailwind CSS and Alpine.js. We covered the basics of Tailwind CSS, including its syntax and classes, and how to use them in our progress bar.
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!