Creating a Progress Bar with Tailwind

Creating a Progress Bar with Tailwind

Written by Tony Lea on Aug 14th, 2020 ・ Views ・ Report Post

Tony Lea Visit User Profile

TailwindCSS is the bees knees and creating simple elements with Tailwind is really easy. In this quick tutorial, I want to show you how to create a quick progress bar like the following:

progress-bar.gif

Adding TailwindCSS

Let's start things off with adding the CDN Link to our HTML page and adding a simple <h1></h1> tag like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS Progress Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" />
</head>
<body>
    
    <h1>Progress Bar</h1>
    
</body>
</html>

Next, we'll add our progress bar container.

Adding the Progress Bar Container

Next step is very simple. We're going to add a new container and background div for our progress bar inside of our HTML page. We'll add this code below our <h1> tag, like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS Progress Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" />
</head>
<body>
    <h1>Progress Bar</h1>
    <div class="h-3 relative max-w-xl rounded-full overflow-hidden">
        <div class="w-full h-full bg-gray-200 absolute"></div>
    </div>
    
</body>
</html>

Our relative container div will have a max width and inside that is another div with a gray progress bar background. This will create the following:

progress-bar-1.png

Adding the Progress Bar

Now that we have our container and background for the progress bar, we need to add the actual bar itself.

<h1 class=>Progress Bar</h1>
<div class="h-3 relative max-w-xl rounded-full overflow-hidden">
    <div class="w-full h-full bg-gray-200 absolute"></div>
    <div class="h-full bg-green-500 absolute" style="width:10%"></div>
</div>

Our progress bar will now look like the following:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

progress-bar-2.png

You'll see that we've set our progress bar with a fixed width of 10%, this will be updated in the next section to be dynamic.

Increasing the Progress Bar

There are multiple ways that we can increase our progress bar. We can do this by using CSS transitions and transitioning w-0 to w-full. Here is an example of how we can accomplish this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS Progress Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" />
</head>
<body>
    
    <h1 class=>Progress Bar</h1>
    <div class="h-3 relative max-w-xl rounded-full overflow-hidden">
        <div class="w-full h-full bg-gray-200 absolute"></div>
        <div id="bar" class="transition-all ease-out duration-1000 h-full bg-green-500 relative w-0"></div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function(){
            let bar = document.getElementById('bar');
            bar.classList.remove('w-0');
            bar.classList.add('w-full');
        });
    </script>
    
</body>
</html>

Take a look at a live example of this progress bar on codepen using the transition properties.

For a more flexible solution, you may want to increase the progress bar using javascript, like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS Progress Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" />
</head>
<body>
    
    <h1 class=>Progress Bar</h1>
    <div class="h-3 relative max-w-xl rounded-full overflow-hidden">
        <div class="w-full h-full bg-gray-200 absolute"></div>
        <div id="bar" class="h-full bg-green-500 relative w-0"></div>
    </div>

    <script>
        let progress = 0;
        let invervalSpeed = 10;
        let incrementSpeed = 1;
        document.addEventListener("DOMContentLoaded", function(){
            let bar = document.getElementById('bar');
            progressInterval = setInterval(function(){
                progress += incrementSpeed;
                bar.style.width = progress + "%";
                if(progress >= 100){
                    clearInterval(progressInterval);
                }
            }, invervalSpeed);
        });
    </script>
    
</body>
</html>

You can find this example of the progress bar in the codepen below:

Depending on your use-case you can decide if you want to animate the bar using CSS transitions or javascript. As you can tell the javascript method does not move as fluid; however, adding some small tweaks can make it smoother.

Conclusion

As you can see creating simple elements using TailwindCSS is very easy. Be sure to head on over to the TailwindCSS docs to learn more about integrating this awesome library in your projects.

Comments (0)