spinner.mdx

title	Tailwind CSS Spinner for React - Material Tailwind
description	Customise your web projects with our spinner component for Tailwind CSS and React using Material Design guidelines.
navigation	spinner spinner-sizes spinner-colors spinner-custom-styles more-examples
github	spinner
prev	speed-dial
next	stepper

# 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.

<CodePreview component={<SpinnerExamples.DefaultSpinner />}>

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.

<CodePreview component={<SpinnerExamples.SpinnerSizes />}>

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.

<CodePreview component={<SpinnerExamples.SpinnerColors />}>

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.

<CodePreview component={<SpinnerExamples.CustomSpinner />}>

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

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

---

## Explore More Tailwind CSS Examples Check out more spinner examples from Material Tailwind Blocks.