Remember the progress bar we built in the last tutorial with Tailwind CSS and Alpine.js? Well, we can do it again with JavaScript.
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:
Understanding the code
id="progress-container"
is the id of the container element. This is used to identify the container element in JavaScript.id="progress-text"
is the id of the text element. This is used to identify the text element in JavaScript and to update the text content, in this case the progress value.id="progress-bar"
is the id of the progress bar element. This is used to identify the progress bar element in JavaScript and to update the width of the progress bar, in this case the progress value.class="absolute top-0 left-0 h-full bg-orange-500 rounded-full"
is the CSS classes of the progress bar element.Classes are removed for brevity.
<div id="progress-container">
<div id="progress-text" > 0% </div>
<div >
<div id="progress-bar" class="absolute top-0 left-0 h-full bg-orange-500 rounded-full" style="width: 0%;"></div>
</div>
</div>
let progress = 0;
is the variable that will be used to store the progress value. This variable will be used to update the progress bar element.const progressText = document.getElementById("progress-text");
is the code that will be used to get the text element with the id of “progress-text”.const progressBar = document.getElementById("progress-bar");
is the code that will be used to get the progress bar element with the id of “progress-bar”.const interval = setInterval(() => {
is the code that will be used to set an interval that will be used to update the progress bar element.if (progress < 100) {
is the condition that will be checked when the progress value is less than 100.progress += 5;
is the code that will be used to increment the progress value by 5.progressText.textContent = progress + "%";
is the code that will be used to update the text content of the text element with the id of “progress-text” to the current progress value.progressBar.style.width = progress + "%";
is the code that will be used to update the width of the progress bar element to the current progress value.} else {
is the code that will be used when the progress value is greater than or equal to 100.clearInterval(interval);
is the code that will be used to clear the interval that was set earlier.document.addEventListener("DOMContentLoaded", function() {
let progress = 0;
const progressText = document.getElementById("progress-text");
const progressBar = document.getElementById("progress-bar");
const interval = setInterval(() => {
if (progress < 100) {
progress += 5;
progressText.textContent = progress + "%";
progressBar.style.width = progress + "%";
} else {
clearInterval(interval);
}
}, 100);
});
In this tutorial, we created a progress bar using Tailwind CSS and JavaScript. We added an event listener to the window object to detect when the page is loaded and updated the progress bar element with the current progress value. We also added a condition to check if the progress value is less than 100 and incremented it by 5 each time.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
"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!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.