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-gray-500
is the text color.bg-gray-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-gray-500"
x-text="progress + '%'">
</div>
<div class="relative h-2 mt-2 bg-gray-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.
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Lexington
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.