How to Build Tailwind CSS Progress Bar ?

Last Updated : 12 Mar, 2024

Progress bars are essential for managing user expectations during operations like file uploads, downloads, or any process requiring waiting. Integrating progress bars into web applications, emphasizing the simplicity and efficiency that Tailwind CSS offers for designing and implementing these components.

Prerequisites

Approach to create Progress Bar using Tailwind CSS:

Integrate the Tailwind via the CDN link. Make the basic structure of the web page using different HTML elements and style them using tailwind utilities. The page background is set to gray with flexbox and center alignment applied to the body for responsiveness.
The progress bar component is constructed using a combination of div elements styled with Tailwind CSS classes. A parent div contains the progress bar with a background color of gray and rounded corners, while the child div represents the progress indicator and transitions smoothly with a green color gradient.
JavaScript is utilized to dynamically update the progress bar’s width and textual percentage indicator. An interval function incrementally increases the progress value until it reaches 100%, triggering a transition effect. This provides real-time feedback to users about the ongoing process.
The progressFill and progressText variables are assigned the corresponding elements by their IDs. The progress variable keeps track of the progress percentage, updated within the interval function.
The interval function updates the width of the progress bar and the text content to reflect the current progress status. When the progress reaches or exceeds 100%, the interval is cleared to stop further progression.

Example: Illustration of Designing a Animated Progress Bar in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>The Animated Progress Bar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 flex justify-center
             items-center h-screen">
    <div class="w-1/3">
        <div class="text-center font-semibold mb-4">
              Progress: 
              <span id="progressText">0%</span>
          </div>
        <div class="relative h-8 bg-gray-200 rounded-full
                    overflow-hidden">
            <div id="progressBar" 
                 class="absolute top-0 left-0 h-full bg-green-500
                        transition-width duration-500">
              </div>
        </div>
    </div>
    <script>
        const progressFill = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 10;
            if (progress > 100) {
                progress = 100;
                clearInterval(interval);
            }
            progressFill.style.width = 
                                  `${progress}%`;
            progressText.textContent = 
                                  `${Math.round(progress)}%`;
        }, 500);
    </script>
</body>

</html>

Output: