Need help with tailwindcss-spinner?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

170 Stars 7 Forks MIT License 16 Commits 0 Opened issues


Spinner utility for Tailwind CSS

Services available


Need anything else?

Contributors list

Tailwind CSS Spinner

Spinner utility for Tailwind CSS

NOTICE: This package is now deprecated and archived as Tailwind CSS v1.6 introduced animations with spinners in the examples. Please use that instead.


Add this plugin to your project:

# Install using pnpm
pnpm install --save-dev tailwindcss-spinner

Install using npm

npm install --save-dev tailwindcss-spinner

Install using yarn

yarn add -D tailwindcss-spinner


// tailwind.config.js
  theme: { // defaults to these values
    spinner: (theme) => ({
      default: {
        color: '#dae1e7', // color you want to make the spinner
        size: '1em', // size of the spinner (used for both width and height)
        border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
        speed: '500ms', // the speed at which the spinner should rotate
      // md: {
      //   color: theme('', 'red'),
      //   size: '2em',
      //   border: '2px',
      //   speed: '500ms',
      // },

variants: { // all the following default to ['responsive'] spinner: ['responsive'], },

plugins: [ // optional configuration for resulting class name and/or tailwind theme key require('tailwindcss-spinner')({ className: 'spinner', themeKey: 'spinner' }), ], }

Resulting CSS:

.spinner {
  position: relative;
  color: transparent !important;
  pointer-events: none;

.spinner::after { content: ''; position: absolute !important; top: calc(50% - (1em / 2)); left: calc(50% - (1em / 2)); display: block; width: 1em; height: 1em; border: 2px solid currentColor; border-radius: 9999px; border-right-color: transparent; border-top-color: transparent; animation: spinAround 500ms infinite linear; }

@keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.