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:
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:
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:
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.