How to create a progress-bar with Tailwind CSS and JavaScript

Remember the progress bar we built in the last tutorial with Tailwind CSS and Alpine.js? Well, we can do it again with JavaScript.

A quick refresh on whhy are progress bars useful

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:

• Show a progress bar to your users when they are uploading a file.
• Show a progress bar to your users when they are downloading something.
• Show a progress bar to your users when they are processing a form.
• When reading a blog post, show a progress bar to show long is left to read.

Let’s write the markup

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’s write the JavaScript

• 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);
});

Conclusion

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!