Spinner utility for Tailwind CSS

  • By NiftyCo
  • Last update: Aug 8, 2022
  • Comments: 4

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.

Installation

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

Usage

// 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('colors.red.500', '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); }
}

Example

Github

https://github.com/aniftyco/tailwindcss-spinner

Comments(4)

  • 1

    Customize class name and Tailwind theme key

    Hey!

    Sometimes it is useful to change default spinner class to something different. This allows to resolve conflicts between styles or apply spinner to already existing designs. I implemented this functionality, new test and minor README fixes. In addition I added option for changing Tailwind theme key too.

  • 2

    Add support for Tailwind v1.x

    This PR adds support for Tailwind v1.x and tests (yay :tada:). It also allows users to generate multiple spinners at once and configure the spinner's rotation speed.

    @joshmanders we should enable TravisCI in the repo so we start getting feedback if things break 👍

    Closes #2.

  • 3

    Add `size` and `border` options to the plugin

    This PR changes the default color for an hex value and allows users to customize the spinner's dimensions as well as its border-width. Default values are still the same.

    Closes #1 and #3.

  • 4

    Use tailwindcss/plugin for plugin declaration

    Hey!

    There is a documented way to declale tailwind plugins. Using this method it is possible to require plugin without additional call like it was requested here.

    This pull request implements plugin the "right" way + test for direct require now passes.

    P.S. I guess it wasn't the best idea to make pull request from same repo/branch, cause it includes old commits (from previous merge). File diff is good though.

Popular Tag

Related