Simple progress bar component with React and Tailwind

#react #javascript #tailwindcss #tutorial

Hello folks,

Recently, I was working on a feature and I had to implement a progress bar in it. Till now, I have always been scared of progress bars (reason: unknown 😂). Most of my previous projects used Bootstrap, and because bootstrap has its own progress component, I didn't need to create a progress bar all by myself.

But fortunately, the current project I am working on is using Tailwind and that means I had to create a progress bar myself! Initially I felt this will be super complicated and I will have to handle so many states and all. But it ends up being a very small and fairly simple component.

In this article, let's understand how to create this easy and simple progress bar. So next time, we will not need any library for this!

Let's get started 🚀

To build a progress bar we will need only two parts.
1- We will need an outer div to show the complete progress bar.
2- Inner div to show the progress.

Let's dive into the code and understand this! Our progress bar component will look something like this -

const ProgressBar = ({ progressPercentage }) => {
    return (
        <div className='h-1 w-full bg-gray-300'>
            <div
                style={{ width: `${progressPercentage}%`}}
                className={`h-full ${
                    progressPercentage < 70 ? 'bg-red-600' : 'bg-green-600'}`}>
            </div>
        </div>
    );
};

These 4 lines of code and your basic progress bar component is ready. 😇

If you see in code, the outer div is the complete progress bar. It has a total of 3 classes, height, width and background color.

The height here is kept 4px only, but that you can change as per your need. Here, to make it more generic, we made the width 100%. Due to this, we will be able to control the width of the progress bar based on the outer component. The background color given to this div defines the empty state of progress bar. Hence we have used bg-gray-300 from tailwind default colors.

Now, as the inner width represents actual progress of this progress bar, we will need to keep its width dependent on the value passed as a percentage of progress. So, we have added an inline style attribute to this div and the percentage goes as a value to the width property. Also, we added 100% height to this inner div. Hence it will consume the whole height of the outer div.

As per my use case, if the progress is below 70%, we need to show the progress bar in red color otherwise green. We can achieve this simply by using conditional styling. You can see we are conditionally applying the classes of background color to this div. If you have more than one condition, you can use a variable to get the value of the background color and apply that class to this div.

This is the bare minimum structure of any progress bar and you can keep on adding more features to it as per requirements. But I guess, this basic structure will solve most of the needs.

That’s it for now. I have created a github repo to create React and Tailwind components. You can check that out and feel free to add more components there if you are interested.

Thank you so much for reading this article. Let me know your thoughts on this and you can also connect with me on Twitter or buy me a coffee if you like my articles.

Happy coding and keep learning 🙌