Spinner Components Animation

This library includes various React components for spinners and animations, helping you enhance your UI effortlessly using styled-components for animations and customizations.

---

Current Components 🛠️

| Name | Import Statement | Description |
| -------- | ----------------------------------------------------- | ------------------------------------------------------------------------------ |
| Spin | import {Spin} from "@holmesdev/ponder-spinners" | Rotating circular spinner with customizable speed, direction, and color. |
| Dots | import {Dots} from "@holmesdev/ponder-spinners" | Sequentially jumping dots creating a wave-like loading effect. |
| PulseBox | import {PulseBox} from "@holmesdev/ponder-spinners" | Morphing boxes that shift between squares and circles in a sequence. |
| Wave | import {Wave} from "@holmesdev/ponder-spinners" | Animated wave with customizable size, colors, speed, and opacity. |
| Circles | import {Circles} from "@holmesdev/ponder-spinners" | Animated set of morphing circles with customizable size, colors, and duration. |

---

Installation

To install and set up the library, run:

``bash

npm i @holmesdev/ponder-spinners
`

Or using Yarn:

`bash

npm yarn @holmesdev/ponder-spinners
`

> [!IMPORTANT] > Styled-components is the JavaScript CSS library used to build our components. To ensure that they work as intended, you will need to separately install styled-components within both the devDependencies & peerDependencies inside of your package.json upon installation of the package.
>
> You MUST also ensure that you are:
>
> - Using React.js v18.3.1 or higher
> - Using styled-components v6.1.13 or higher

Latest Package Version

| Name | Version |
| :--------------------------------------------------------------------------------------: | :------------------------------------------------------: |
| @holmesdev/ponder-spinners | !NPM |

---

Usage

$3

`javascript
import { Spin } from "@holmesdev/ponder-spinners";

color1="#FF6F61"
color2="#ffa9a1"
opacity1={0.5}
opacity2={1}
speed="1s"
direction="360deg"
size={100}
/>;
`

$3

`javascript
import { Dots } from "@holmesdev/ponder-spinners";

;
`

$3

`javascript
import { PulseBox } from "@holmesdev/ponder-spinners";

color1="#22333B"
color2="#FF6F61"
color3="#ffa9a1"
color4="#22333B"
/>;
`

$3

`javascript
import { Wave } from "@holmesdev/ponder-spinners";

;
`

$3

`javascript
import { Circles } from "@holmesdev/ponder-spinners";

size={90}
color1="#FF6F61"
color2="#22333B"
color3="#ffa9a1"
duration={3}
/>;
`

---

Component Properties 📋

$3

| Property | Type | Description |
| ----------- | ------ | --------------------------------------------------------------- |
| color1 | string | Color 1 of the circular spinner. Defaults to #FF6F61. |
| color2 | string | Color 2 of the circular spinner. Defaults to #ffa9a1. |
| opacity1 | number | Opacity of the color 1. Defaults to 1. |
| opacity2 | number | Opacity of the color 2. Defaults to 0.5. |
| speed | string | Speed of the rotation (e.g., 1s). Defaults to 1s. |
| direction | string | Direction of rotation (e.g., 360deg). Defaults to -360deg. |
| size | string | The size of the spinner (e.g., 100). Defaults to 100 |

$3

| Property | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| color1 | string | Color for the first dot. Defaults to "#22333B". |
| color2 | string | Color for the second dot. Defaults to "#EAE0D5". |
| color3 | string | Color for the third dot. Defaults to "#C6AC8F". |

$3

| Property | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| color1 | string | Color for the first box. Defaults to "#22333B". |
| color2 | string | Color for the second box. Defaults to "#FF6F61". |
| color3 | string | Color for the third box. Defaults to "#ffa9a1". |
| color4 | string | Color for the fourth box. Defaults to "#22333B". |

$3

| Property | Type | Description |
| --------- | ------ | ------------------------------------------------------- |
| size | string | Size of the SVG (width and height). Defaults to 30px. |
| color1 | string | Color for the first wave. Defaults to "#22333B". |
| color2 | string | Color for the second wave. Defaults to "#EAE0D5". |
| speed | string | Speed of the animation (e.g., 2s). Defaults to 2s. |
| opacity | number | Opacity of the wave (0 to 1). Defaults to 1. |

$3

| Property | Type | Description |
| ---------- | ------ | ------------------------------------------------------------- |
| size | number | Size of the circles. Defaults to 90. |
| color1 | string | Color of the first circle. Defaults to "#FF6F61". |
| color2 | string | Color of the second circle. Defaults to "#22333B". |
| color3 | string | Color of the third circle. Defaults to "#ffa9a1". |
| duration | number | Duration of the animation cycle in seconds. Defaults to 3s`. |

---

Inspiration 💡

This library is inspired by various popular UI/UX components and spinners to ensure optimal user experience while loading content. Special thanks to the open-source community for their contributions to animated UI libraries.

$3

Our Mentors for guiding us through the development process; Alex, Amberle and Daniel

License


Available for open-source consumption under MIT licensing. See MIT License for more information.