DEV Community

Cover image for How to Build a Tailwind CSS Progress Bar

Posted on

How to Build a Tailwind CSS Progress Bar

A progress bar is a graphical element that visually represents the completion status of a task or process. It is commonly used to provide feedback to users on the progress of a task, such as file uploads, form submissions, or page loading.

In this guide, we will walk you through the process of building a progress bar using Tailwind CSS, a popular utility-first CSS framework. With Tailwind CSS's extensive set of utility classes, creating a progress bar becomes a breeze.


To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, make sure you have Tailwind CSS installed in your project.

Step 1: Set Up the HTML Structure

First, let's set up the HTML structure for our progress bar. Create a new HTML file called index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="<>" rel="stylesheet">
  <title>Tailwind Progress Bar</title>
  <!-- Your progress bar HTML structure here -->

Enter fullscreen mode Exit fullscreen mode

In this code snippet, we start by including the necessary <meta> tags for character set and viewport settings.

We then link to the Tailwind CSS CDN to access the framework's utility classes. Inside the <body> tag, you will add the HTML structure for the progress bar.

Step 2: Build the Progress Bar with Tailwind CSS

To create the progress bar, we will utilize Tailwind CSS utility classes. Open your HTML file in a web browser or run a local development server to see the progress as you build it.

Start by adding a <div> element with the classes h-4 bg-gray-200 rounded to serve as the background of the progress bar. This sets the height, background color, and border radius properties for the progress bar.

<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
  <!-- Progress bar content will be added here -->

Enter fullscreen mode Exit fullscreen mode

Inside this <div>, add another <div> element with the classes bg-blue-700 rounded-full. This represents the actual progress of the task. You can customize the color by changing the bg-blue-500 class to any other color class provided by Tailwind CSS.

<div class="m-20">
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
    <div class="bg-blue-700 text-xs font-medium text-white text-center p-0.5 leading-none rounded-full" style="width: 55%"> 55%</div>
Enter fullscreen mode Exit fullscreen mode

Progress bar

Step 3: Make the Progress Bar Dynamic

To make the progress bar dynamic and update it programmatically, we will use JavaScript. Add a <script> tag just before the closing </body> tag in your HTML file to add the JavaScript code.

  // Get the inner progress bar element
  const progressBar = document.querySelector('.bg-blue-700');

  // Set the initial progress value
  let progress = 0;

  // Function to update the progress bar
  const updateProgressBar = () => { = `${progress}%`;

  // Call the updateProgressBar function to set the initial progress

  // Example: Increment the progress by 10% every 1 second
  setInterval(() => {
    progress += 10;
  }, 1000);

Enter fullscreen mode Exit fullscreen mode

In this JavaScript code snippet, we first select the inner progress bar element using document.querySelector('.bg-blue-500'). We then set an initial progress value of 0 and define a function called updateProgressBar() to update the progress bar's width based on the progress variable. We call updateProgressBar() initially to set the initial progress.

To demonstrate how the progress bar updates dynamically, we use setInterval() to increment the progress value by 10% every 1 second. You can customize the increment and interval to match your specific use case.

Step 4: Customize and Enhance the Progress Bar

Tailwind CSS provides a wide range of utility classes that you can use to customize and enhance your progress bar. Here are a few examples:

  • Change the color of the progress bar by adding a different background color class, such as bg-green-500 or bg-red-500.
  • Adjust the height of the progress bar by changing the h-4 class to h-2 or any other desired value.
  • Add a border to the progress bar by applying the border class and specifying the desired border color using the border-blue-500 class.

Feel free to experiment with different utility classes and styles to create a progress bar that matches your project's design requirements.


Congratulations! You have successfully built a progress bar using Tailwind CSS. In this guide, we covered the steps of setting up the HTML structure, building the progress bar with Tailwind CSS utility classes, making the progress bar dynamic with JavaScript, and customizing the progress bar to suit your needs.


Top comments (0)