Tailwind CSS Epic Spinners

This library is the Tailwind CSS Plugin of epic-spinners by EpicMax

Installation

npm install --save-dev tw-epic-spinners

# Or use Yarn

yarn add -D tw-epic-spinners

Demo

An online demo is available here

Usage

Add the Plug-In in your tailwind.config.ts:

import spinners from 'tw-epic-spinners';

export default {
  // Other configs
  plugins: [spinners],
};

How to use

Spinners

• spinner-flower

<div class="spinner-flower">
  <div>
    <div />
  </div>
</div>

• spinner-pixel

<div class="spinner-pixel" />

• spinner-hollow-dots

<div class="spinner-hollow-dots">
  <div />
  <div />
  <div />
</div>

• spinner-intersecting-circles

<div class="spinner-intersecting-circles">
  <div>
    <div />
    <div />
    <div />
    <div />
    <div />
    <div />
    <div />
  </div>
</div>

• spinner-orbit

<div class="spinner-orbit">
  <div />
  <div />
  <div />
</div>

• spinner-radar

<div class="spinner-radar">
  <div>
    <div />
  </div>
  <div>
    <div />
  </div>
  <div>
    <div />
  </div>
  <div>
    <div />
  </div>
</div>

• spinner-scaling-squares

<div class="spinner-scaling-squares">
  <div />
  <div />
  <div />
  <div />
</div>

• spinner-half-circle

<div class="spinner-half-circle" />

• spinner-trinity-rings

<div class="spinner-trinity-rings">
  <div />
  <div />
  <div />
</div>

• spinner-fulfilling-square

<div class="spinner-fulfilling-square" />

• spinner-circles-to-rhombuses

<div class="spinner-circles-to-rhombuses">
  <div />
  <div />
  <div />
</div>

• spinner-semipolar

<div class="spinner-semipolar">
  <div />
  <div />
  <div />
  <div />
  <div />
</div>

• spinner-self-building-square

<div class="spinner-self-building-square">
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
</div>

• spinner-swapping-squares

<div class="spinner-swapping-squares">
  <div />
  <div />
  <div />
  <div />
</div>

• spinner-fulfilling-bouncing-circle

<div class="spinner-fulfilling-bouncing-circle" />

• spinner-fingerprint

<div class="spinner-fingerprint">
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
</div>

• spinner-spring

<div class="spinner-spring">
  <div />
  <div />
</div>

• spinner-atom

<div class="spinner-atom">
  <div>
    <div />
    <div />
    <div />
  </div>
</div>

• spinner-looping-rhombuses

<div class="spinner-looping-rhombuses">
  <div />
  <div />
  <div />
</div>

• spinner-breeding-rhombus

<div class="spinner-breeding-rhombus">
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
</div>

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 utilities.

<div class="spinner-fulfilling-square spinner-size-16" />

Using arbitrary values:

<div class="spinner-fulfilling-square spinner-size-[70px]" />

Duration

The spinner-duration-* utility class allows you control the duration.

It follows also a similar pattern to Tailwind CSS Transition duration utilities.

<div class="spinner-fulfilling-square spinner-duration-1000" />

Using arbitrary values:

<div class="spinner-fulfilling-square spinner-duration-[2.5s]" />

Color

Color can be controlled by Tailwind CSS Text Color utility.

<div class="spinner-fulfilling-square text-sky-600" />

License

MIT License