https://github.com/mthaip/tw-epic-spinners
A TailwindCSS Plugin of Epic Spinners.
https://github.com/mthaip/tw-epic-spinners
animation-css css javascript loading-animations loading-screen loading-spinner reactjs spinners tailwindcss tailwindcss-plugin tailwindcss-ui vuejs
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 1 year ago)
- Default Branch: master
- Last Pushed: 2024-04-18T10:42:36.000Z (about 1 year ago)
- Last Synced: 2025-03-27T18:52:02.031Z (about 1 month ago)
- Topics: animation-css, css, javascript, loading-animations, loading-screen, loading-spinner, reactjs, spinners, tailwindcss, tailwindcss-plugin, tailwindcss-ui, vuejs
- Language: TypeScript
- Homepage: https://tw-epic-spinners.mthaip.com/
- Size: 117 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Epic Spinners
This library is the Tailwind CSS Plugin 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
```
## Demo
An online demo is available [here](https://tw-epic-spinners.mthaip.com)
## Usage
Add the Plug-In in your `tailwind.config.ts`:
```javascript
import spinners from 'tw-epic-spinners';
export default {
// Other configs
plugins: [spinners],
};
```
## How to use
### Spinners
- `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
```
## License
[MIT](./LICENSE) License