Quick and easy loading spinner without JavaScript!

In this article, you will learn how to set up a quick and easy loading spinner using just Tailwind CSS. Stick around till the end to get the extra feature.

Why use Tailwind CSS, not JavaScript?

The reason for using Tailwind CSS is to reduce the amount of JavaScript being shipped with the framework you are making use of. The less JavaScript you have, the more lightweight your web application becomes.

The Spinner

Working with Tailwind CSS helps you ship faster, and you don't need to spend so much time styling or organising your CSS files.

Let's get started.

<div class="flex items-center justify-center h-[50vh]">
  <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
</div>

That's all you need to get a simple loading spinner in your web application.

• animate-spin: This class adds a rotating animation to the element.

• rounded-full: This class makes the element a perfect circle by rounding its corners.

• h-16 w-16: These classes set the height and width of the spinner. You can adjust the values based on your design.

• h-[50vh]: This class sets a responsive height for all screens.

• border-t-2 border-blue-500: These classes add a border to the top of the spinner, creating the appearance of a spinner with a specific color (blue-500). You can customize the color by choosing a different Tailwind CSS color class.

Make it Reusable

An extra is to show you how to make it reusable in Vue and React.

Vue

<template>
  <div class="flex items-center justify-center">
    <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
  </div>
</template>

<script>
export default {
  name: 'Spinner'
};
</script>

<style scoped>
/* Add any scoped styles if needed */
</style>

React

import React from 'react';

const Spinner = () => {
  return (
    <div className="flex items-center justify-center">
      <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
    </div>
  );
};

export default Spinner;

You can conditionally render the loading spinners when updating a state or fetching data from an API.

Resources

• Get started with Tailwind CSS.

• Get started with React.

• Get started with Vue.