Tailwind CSS Spinner - React

Use our Tailwind CSS Spinner component in your web projects. The Spinner can be used for loading states on your website.

See below our beautiful Spinner example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.

import { Spinner } from "@material-tailwind/react";
 
export function DefaultSpinner() {
  return <Spinner />;
}

Spinner Sizes

You can customize the size of the Spinner component using the tailwind css w-* and h-* classes or using the width and height props.

import { Spinner } from "@material-tailwind/react";
 
export function SpinnerSizes() {
  return (
    <div className="flex items-end gap-8">
      <Spinner className="h-4 w-4" />
      <Spinner className="h-6 w-6" />
      <Spinner className="h-8 w-8" />
      <Spinner className="h-10 w-10" />
      <Spinner className="h-12 w-12" />
    </div>
  );
}

Spinner Colors

The Spinner component comes with 19 different colors that you can change it using the color prop.

import { Spinner } from "@material-tailwind/react";
 
export function SpinnerColors() {
  return (
    <div className="flex gap-8">
      <Spinner color="blue" />
      <Spinner color="red" />
      <Spinner color="green" />
      <Spinner color="amber" />
      <Spinner color="teal" />
      <Spinner color="indigo" />
      <Spinner color="purple" />
      <Spinner color="pink" />
    </div>
  );
}

Spinner with Custom Styles

You can use the className prop to add custom styles to the Spinner component.

import { Spinner } from "@material-tailwind/react";
 
export function CustomSpinner() {
  return <Spinner className="h-16 w-16 text-gray-900/50" />;
}