https://github.com/mthaip/tw-epic-spinners
A TailwindCSS Plugin of Epic Spinners.
https://github.com/mthaip/tw-epic-spinners
animation-css css html javascript loading-animations loading-screen loading-spinner react spinners tailwindcss tailwindcss-plugin tailwindcss-v3 tailwindcss-v4 typescript vue
Last synced: 21 days ago
JSON representation
A TailwindCSS Plugin of Epic Spinners.
- Host: GitHub
- URL: https://github.com/mthaip/tw-epic-spinners
- Owner: mthaip
- License: mit
- Created: 2024-04-15T16:18:46.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-24T21:03:37.000Z (3 months ago)
- Last Synced: 2026-03-26T00:20:01.818Z (3 months ago)
- Topics: animation-css, css, html, javascript, loading-animations, loading-screen, loading-spinner, react, spinners, tailwindcss, tailwindcss-plugin, tailwindcss-v3, tailwindcss-v4, typescript, vue
- Language: TypeScript
- Homepage: https://tw-epic-spinners.mthaip.com/
- Size: 793 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tw-epic-spinners
> 20 pure-CSS loading spinners as a Tailwind CSS plugin. Works with Tailwind v3 and v4, and any framework.
Live previews & docs: [tw-epic-spinners.mthaip.com](https://tw-epic-spinners.mthaip.com)
## Introduction
`tw-epic-spinners` is a Tailwind CSS plugin that provides 20 pure-CSS loading spinners. Supports Tailwind v3 and v4.
This library is the Tailwind CSS port of [epic-spinners](http://epic-spinners.epicmax.co/) by [EpicMax](https://github.com/epicmaxco/epic-spinners).
## Installation
```bash
npm install --save-dev tw-epic-spinners
# Or use Yarn
yarn add -D tw-epic-spinners
# Or use pnpm
pnpm add -D tw-epic-spinners
```
## Usage
Then, when using Tailwind CSS v4, add the plugin to your main stylesheet:
```css
/* Your main css file */
@import "tailwindcss";
@plugin "tw-epic-spinners";
```
If you are still using Tailwind CSS v3, add the plugin to your `tailwind.config.js` file:
```typescript
import spinners from 'tw-epic-spinners';
export default {
// Other configs
plugins: [spinners],
};
```
## Core concepts
### Using Spinner Creator (BETA)
`creator(spinner, classes?) => string`
Returns an HTML string for a given spinner type, which can be injected into your UI.
#### Parameters
- `spinner` (`string`): Spinner name (see [Spinners](#spinners) section).
- `classes` (`string | string[]`, optional): Additional classes to apply to the spinner wrapper. Can be a string or array of Tailwind utility classes.
#### Returns
- `string`: HTML markup string representing the selected spinner.
#### Usage Examples
##### Vue
```vue
import { creator } from 'tw-epic-spinners';
const spinnerHTML = creator('spinner-half-circle', ['spinner-size-12', 'sm:spinner-size-16', 'spinner-duration-[2.5s]']);
```
##### React
```tsx
import { creator } from 'tw-epic-spinners';
const Spinner = () => {
const html = creator('spinner-half-circle', 'spinner-size-12 sm:spinner-size-16 spinner-duration-[2.5s]');
return
;
};
export default Spinner;
```
### Spinners
There are 20 spinners. Each is a single utility class applied to a `
`, with the inner markup shown below.
#### `spinner-flower`
```html
```
#### `spinner-pixel`
```html
```
#### `spinner-hollow-dots`
```html
```
#### `spinner-intersecting-circles`
```html
```
#### `spinner-orbit`
```html
```
#### `spinner-radar`
```html
```
#### `spinner-scaling-squares`
```html
```
#### `spinner-half-circle`
```html
```
#### `spinner-trinity-rings`
```html
```
#### `spinner-fulfilling-square`
```html
```
#### `spinner-circles-to-rhombuses`
```html
```
#### `spinner-semipolar`
```html
```
#### `spinner-self-building-square`
```html
```
#### `spinner-swapping-squares`
```html
```
#### `spinner-fulfilling-bouncing-circle`
```html
```
#### `spinner-fingerprint`
```html
```
#### `spinner-spring`
```html
```
#### `spinner-atom`
```html
```
#### `spinner-looping-rhombuses`
```html
```
#### `spinner-breeding-rhombus`
```html
```
### Utility
#### Size
The `spinner-size-*` utility class allows you to quickly define the size of a spinner.
It follows a similar pattern to [Tailwind CSS spacing](https://tailwindcss.com/docs/theme#spacing) utilities.
```html
```
Using arbitrary values:
```html
```
#### Duration
The `spinner-duration-*` utility class allows you control the duration.
It follows also a similar pattern to [Tailwind CSS Transition duration](https://tailwindcss.com/docs/transition-duration) utilities.
```html
```
Using arbitrary values:
```html
```
#### Color
Color can be controlled by [Tailwind CSS Text Color utility](https://tailwindcss.com/docs/text-color).
```html
```
Color follows `currentColor`, so any Tailwind text-color utility works (including arbitrary values and responsive prefixes).
## Credits
Spinner designs by [EpicMax / epic-spinners](https://github.com/epicmaxco/epic-spinners). This package re-implements them as a Tailwind plugin.
## License
[MIT](./LICENSE)