Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aniftyco-archive/tailwindcss-spinner
Spinner utility for Tailwind CSS
https://github.com/aniftyco-archive/tailwindcss-spinner
spinner tailwind tailwind-css tailwindcss tailwindcss-plugin
Last synced: about 2 months ago
JSON representation
Spinner utility for Tailwind CSS
- Host: GitHub
- URL: https://github.com/aniftyco-archive/tailwindcss-spinner
- Owner: aniftyco-archive
- License: mit
- Archived: true
- Created: 2018-03-27T03:17:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-02T18:52:14.000Z (about 4 years ago)
- Last Synced: 2024-04-11T01:20:37.782Z (6 months ago)
- Topics: spinner, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-spinner
- Size: 88.9 KB
- Stars: 170
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://tailwindcss.com/docs/animation/#spin) in the examples. Please use that instead.
## Installation
Add this plugin to your project:
```bash
# 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
```js
// 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:
```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
