Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Today we are going to create a super simple animated loader with only Tailwind CSS.
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
blob
: This is a class that will be applied to the element that we want to animate.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.- `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',
},
},
},
};
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.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>
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
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!