Simple React Loader component with Tailwind

#react #tailwindcss #css #webdev

Hello Folks,

It's been a while now that I am working in Tailwind and just recently in one of the React projects, I needed a simple loader component. But as Tailwind is a utility-first library, there is no predefined spinner or loader in it. So I created my own simple loader using React with Tailwind and in this tutorial I will explain how you can create that too!

We will be creating a loader similar to this -

Let's get started -

For this tutorial, I am assuming you already have a React project setup ready with complete Tailwind configuration. Now, let's create a Loader component in React and add those three circles in it.

Our loader component will look like this -


const Loader = () => {
     let circleCommonClasses = 'h-2.5 w-2.5 bg-current rounded-full';

     return (
    <div className='flex'>
         <div className={`${circleCommonClasses} mr-1`}></div>
         <div className={`${circleCommonClasses} mr-1`}></div>
         <div className={`${circleCommonClasses}`}></div>
    </div>
     );
};

export default Loader;

With the above code, the component created will look something like this -

Let's now understand the code.

As three circles are identical, I created a variable circleCommonClasses and assigned a list of all tailwind classes to that variable. This will ensure that, later if we need to change any style, it will be easy to make that change at a single place making it less error prone.

Also note that, I have added bg-current class for the background. This way, we will be able to use this loader anywhere without thinking of providing it the correct color. If you want to make these circles similar to the first image shown, you can modify these classes and apply your own styles.

The outer div have display: flex property and that will make sure that all the three circles are inline.

Now, we will need to add animation to these circles and complete our loader. By default, Tailwind provides some basic animations and we will be using one of them. The animation name is bounce and we can add it by adding a class animate-bounce to our circles.

But here comes a small problem, if all three circles have same animation bounce, they will all bounce together and we will not get the effect of circles rendering one after the other as shown in first image. To get that effect, we will need to add animation delay to the last two circles.

But unfortunately, till Tailwind v2.1 animation-delay property is not explicitly added to the Tailwind. So we will need to find other way for achieving this.

The best way to do this is, to extend the animation class in Tailwind.config.js. Animation delay can be added as a shorthand property to the animation property. We can add delay that way and create our custom classes in the tailwind config. Hence, after adding that, our tailwind.config.js file will look something like this -

//tailwind.config.js

module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false,
    theme: {
        colors: {
      //some colors
        },
        extend: {
            animation: {
                bounce200: 'bounce 1s infinite 200ms',
                bounce400: 'bounce 1s infinite 400ms',
            },
        },
    },
    plugins: [],
};

In this, take a close look at animation object. We created two classes bounce200 and bounce400 with animation bounce and added animation delay of 200ms and 400ms each. Now, once we add these classes to our circles in the Loader component, we will be good with the our Loader.

Finally, our loader will look something like this -

const Loader = () => {
    let circleCommonClasses = 'h-2.5 w-2.5 bg-current   rounded-full';

    return (
        <div className='flex'>
            <div className={`${circleCommonClasses} mr-1 animate-bounce`}></div>
            <div
                className={`${circleCommonClasses} mr-1 animate-bounce200`}
            ></div>
            <div className={`${circleCommonClasses} animate-bounce400`}></div>
        </div>
    );
};

export default Loader;

In this way, the very basic animated Loader with React and Tailwind is ready! Though, Tailwind still have some limitations over animations, we can use it creatively and create our own components. There are some plugins as well which you can use directly for this purpose.

That was it from this article. Do share your comments/feedback about the article and also some wonderful components you created recently! You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning 🙌