Tailwind CSS Spinner - React

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

See below our beautiful Spinner component examples 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.

Spinner Demo

Here's how to implement a simple Spinner component. It can be used to show loading state for elements in your website.

"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerDemo() {
  return <Spinner />;
}
"use client";

import { Spinner } from "@material-tailwind/react";

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

Spinner Sizes

We provide different spinner sizes like xs, sm, md, lg, xl, and xll so you can adapt it easily to your needs. You can simply use the size prop to change the spinner size.

In the example below, we've showcased the different spinner sizes that you can use in your project.

"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerSizes() {
  return (
    <div className="flex items-end gap-4">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
      <Spinner size="xxl" />
    </div>
  );
}
"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerSizes() {
  return (
    <div className="flex items-end gap-4">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
      <Spinner size="xxl" />
    </div>
  );
}

Spinner Colors

We provide different spinner colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the spinner color.

In the example below, we've showcased the different spinner colors that you can use in your project.

"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-4">
      <Spinner color="primary" />
      <Spinner color="secondary" />
      <Spinner color="info" />
      <Spinner color="success" />
      <Spinner color="warning" />
      <Spinner color="error" />
    </div>
  );
}
"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-4">
      <Spinner color="primary" />
      <Spinner color="secondary" />
      <Spinner color="info" />
      <Spinner color="success" />
      <Spinner color="warning" />
      <Spinner color="error" />
    </div>
  );
}

Spinner Custom Styles

You can use the className prop to customize the Spinner component style and make your own custom spinner.

"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerCustomStyles() {
  return <Spinner className="h-16 w-16" />;
}
"use client";

import { Spinner } from "@material-tailwind/react";

export function SpinnerCustomStyles() {
  return <Spinner className="h-16 w-16" />;
}