Skip to content

Latest commit

 

History

History
106 lines (85 loc) · 2.74 KB

spinner.mdx

File metadata and controls

106 lines (85 loc) · 2.74 KB
title description navigation github prev next
Tailwind CSS Spinner for React - Material Tailwind
Customise your web projects with our spinner component for Tailwind CSS and React using Material Design guidelines.
spinner
spinner-sizes
spinner-colors
spinner-custom-styles
spinner
speed-dial
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" />;
}