How to build animated spinner with Tailwindcss and Next.js

Animated spinner is used to let the user know that we are waiting some response from the back end before continuing

In this tutorial, we are going to learn how to build animated spinner using tailwindcss in a react based project like Next.js

By following this tutorial you will be able to create your own spinner exactly like this link and see the spinner showing up each time you click on the link

First step : configure tailwindcss with Next.js

If it is not already done, you can check out official docs to use tailwindcss with nextjs

Second step: build the spinner

Assuming you have already configure tailwindcss in your Next.js project, let’s build our spinner.

Create a spinner.js under components folder, if you do not have components folder, you can create under the root directory of your project, and add the following code:

export default function Spinner() {
	return (
		<span className="h-screen w-full flex justify-center items-center">
			<span className="animate-spin relative flex h-10 w-10 rounded-sm bg-purple-400 opacity-75"></span>
		</span>
	);
}

Third step: display the spinner

So let’s display our spinner, to do so, create spin.js under pages folder and add the following

import Spinner from '../components/spinner';

export default function () {
	return <Spinner />;
}

Now hit the browser with typing localhost:3000/spin, you should see something like the following spinning in the middle of the page.

You can try it live as well on this link

Animated ping

You can also choose to do ping utility to make an element scale and fade like a radar ping or ripple of water, to do so change animate-spin with animate-ping in spinner.js component.

Animated bounce

Animated bounce is possible also and it gives a nice effect, you can try it with animate-bounce instead of animate-spin in spinner.js component.

### Customizing animation

It is possible to customize the default animation provided by tailwindcss and add some specific animation.

For example we can slow down the spinning by adding the following to tailwind.config.js

theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
       }
    },

And then, replace animate-spin by animate-spin-slow in the spinner component.

Now try it out in the browser, you should see that the spinning is slower now.

Conclusion

We have seen how to build an animated spinner with tailwindcss, the latter made it really easy to do such a thing with its default configuration, and it is possible to customize it as well for specific need.