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-spinnerUsage
// 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); }
}