How to create aloader with Tailwind CSS

Today we are going to create a super simple animated loader with only Tailwind CSS.

Why use a loader?

A loader is a visual element that indicates that something is happening. It can be used to indicate that a page is loading, a form is being submitted, or any other action that requires the user’s attention.

Use case

• When a page is loading, a loader can be used to indicate that the page is being loaded.
• When a form is being submitted, a loader can be used to indicate that the form is being submitted.
• When a user is waiting for a response, a loader can be used to indicate that the user is waiting. And many other use cases.

Let’s get started writing some css code

The blob

• The class blob: This is a class that will be applied to the element that we want to animate.

The blob before and after

• grid-area: 1/1: What this does is it sets the grid area of the element to span one column and one row.
• animation: gooeyBlob 2s infinite;: This is a CSS animation property that will be applied to the element that we want to animate this will create a gooey effect.

The keyframes

- `0% { transform: translate(0, 0); }`: This is the starting point of the animation.
- `25% { transform: translate(100%, 0); }`: This is the starting point of the animation.
- `50% { transform: translate(100%, 100%); }`: This is the starting point of the animation.
- `75% { transform: translate(0, 100%); }`: This is the starting point of the animation.
- `100% { transform: translate(0, 0); }`: This is the starting point of the animation.

```css
.blob {
	filter: blur(6px) contrast(20);
}

.blob:before,
.blob:after {
	grid-area: 1/1;
	animation: gooeyBlob 2s infinite;
}

.blob:after {
	animation-delay: -1s;
}

@keyframes gooeyBlob {
	0% {
		transform: translate(0, 0);
	}

	25% {
		transform: translate(100%, 0);
	}

	50% {
		transform: translate(100%, 100%);
	}

	75% {
		transform: translate(0, 100%);
	}

	100% {
		transform: translate(0, 0);
	}
}

You can also add to the tailwind.config.js file to add the animations and keyframes just like this:

module.exports = {
  theme: {
    extend: {
      animation: {
        gooeyBlob: 'gooeyBlob 2s infinite',
        gooeyBlobDelay: 'gooeyBlob 2s infinite -1s',
      },
      keyframes: {
        gooeyBlob: {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.2)' },
        },
      },
      filter: {
        'blob-filter': 'blur(6px) contrast(20)',
      },
      mixBlendMode: {
        darken: 'darken',
      },
      gridColumn: {
        'span-1/1': '1 / 1',
      },
    },
  },
};

The markup

The wrapper

• rotate-45: This is a class that will rotate the element 45 degrees. to make it look “cooler”.
• scale-y-[-1]: This is a class that will scale the element vertically by -1.

The blobs

As you can see, we have two blob, one, whichs is comment for all blobs called blob and the other called blob2. The blob2 is the blob has a class called scale-x-[-1] which will scale the element horizontally by -1.

• grid: This is a class that will create a grid layout for the element.
• before:size-11 and after:size-11: This is a class that will set the size of the before and after pseudo-elements to 11 pixels.
• content-['']: This is a class that will set the content of the element to an empty string.
• size-28: This is a class that will set the size of the element to 28 pixels.
• before:bg-orange-500 and after:bg-orange-500: This is a class that will set the background color of the before and after pseudo-elements to orange-500.
• bg-white: This is a class that will set the background color of the element to white. You will have to adjust this one if for example you have a dark mode. so add the same color to this element.

<div class="rotate-45">
  <div class="flex items-center w-32 mx-auto scale-y-[-1]">
    <div class="blob grid p-4 before:size-11 after:size-11 content-[''] size-28 before:bg-orange-500 after:bg-orange-500 bg-white mx-auto blob2 scale-x-[-1]"></div>
    <div class="blob grid p-4 before:size-11 after:size-11 content-[''] size-28 before:bg-orange-500 after:bg-orange-500 bg-white mx-auto relative"></div>
  </div>
  <div class="flex items-center w-32 mx-auto">
    <div class="blob grid p-4 before:size-11 after:size-11 content-[''] size-28 before:bg-orange-500 after:bg-orange-500 bg-white mx-auto blob2 scale-x-[-1]"></div>
    <div class="blob grid p-4 before:size-11 after:size-11 content-[''] size-28 before:bg-orange-500 after:bg-orange-500 bg-white mx-auto relative"></div>
  </div>
</div>

Conclusion

This is a simple animated loader that can be used to indicate that something is happening. The code is easy to understand and the structure is clear. The use of Tailwind CSS and JavaScript makes it easy to style the loader and add interactivity.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza