How to build Tailwind CSS Progress Bar

How to build Tailwind Progress Bar.

By Emmanuel Chinonso

Technical Writer/Web Developer

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.

Prerequisites

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. Open your preferred code editor and create a new HTML file called index.html. Add the following code:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="<https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css>"
      rel="stylesheet"
    />
    <title>Tailwind Progress Bar</title>
  </head>
  <body>
    <div class="h-4 bg-gray-200 rounded">
      <div class="h-full bg-indigo-500 rounded"></div>
    </div>
  </body>
</html>

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, we create a <div> element with the classes h-4 bg-gray-200 rounded, which sets the background color and border radius for the progress bar. Inside this div, we add another <div> element with the classes h-full bg-blue-500 rounded, which represents the progress itself.

Step 2: Apply Tailwind CSS Utility Classes

Now that we have set up the HTML structure, let's apply Tailwind CSS utility classes to style our progress bar. Open your HTML file in a web browser or run a local development server, and you will see a basic progress bar with a gray background. However, it doesn't show any progress yet.

To make the progress bar dynamic, we need to add inline styles using Tailwind CSS utility classes. Update the inner <div> element as follows:

html

<div class="h-full bg-indigo-500 rounded" style="width: 30%;"></div>

In this example, we added the style attribute to the inner <div> element and set the width property to 30%. This will make the progress bar fill 60% of the outer container.

Step 3: Make the Progress Bar Responsive

By default, Tailwind CSS provides responsive utility classes that allow you to adjust the width of the progress bar based on different screen sizes. To make our progress bar responsive, we can use the w-1/2 class, which sets the width to 50% on small screens and 100% on larger screens.

Update the inner <div> element's style attribute as follows:

html

<div class="h-full bg-indigo-500 rounded w-1/2 sm:w-full"></div>

In this code snippet, we added the w-1/2 class, which sets the width to 50% on small screens. We also added the sm:w-full class, which sets the width to 100% on screens larger than the small breakpoint.

Step 4: Add Animation to the Progress Bar

To make our progress bar visually appealing, we can add a smooth animation that provides a visual representation of progress. Tailwind CSS provides utility classes for animation, making it easy to add animation effects to our progress bar.

Update the inner <div> element as follows:

html

<div class="m-10">
  <div class="h-4 w-full bg-gray-300 dark:bg-neutral-600 overflow-hidden">
    <div
      class="flex flex-col justify-center h-full bg-indigo-500 rounded transition-width duration-500 ease-in-out leading-none"
      style="width: 30%"
    ></div>
  </div>
</div>

In this example, we added the transition-width class, which specifies that the width transition should be animated. We also added the duration-500 class, which sets the animation duration to 500 milliseconds, and the ease-in-out class, which applies a smooth easing effect to the animation.

Progress bar with label inside

Progress bar with label inside.

25%

50%

75%

100%

Muticolor Progress bar

Multicolor progress bar

Floating label Progress bar

Floating label progress bar

25%

50%

75%

100%

Vertical progress Bar

This shows a vertical Tailwind progress bar.

Circular Progress bar

Circular Progress bar without label and with label

50%

Conclusion

Congratulations! You have successfully built a Tailwind progress bar. In this tutorial, we covered the steps of setting up the HTML structure, applying Tailwind CSS utility classes, making the progress bar responsive, adding animation and displaying different variant of Tailwind progress bar.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

How to add tailwind CSS colors and Fonts to your project

How to create a Beautiful Responsive Navigation bar Using Tailwind CSS

Comments

...