Introduction

Team DBUG DINGOES from Holmesglen Ponder Spinners has crafted a set of animated SVG spinners and loading indicators, so you don’t have to spend time coding and debugging UI components from scratch. Enhance your app's loading experience with visually captivating components!

Check out ourGitHubfor more details, or visit ourNPM documentation.

Installation

To install and set up the library, run:

npm i @holmesdev/ponder-spinners

Or using Yarn:

yarn add @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

Current Spinner Components

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

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

Usage

Here's how to use the components:

Spin

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

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

Dots

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

                <Dots 
                    color1="#22333B" 
                    color2="#FF6F61" 
                    color3="#B7AEA3" 
                />;

Pulse Box

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

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

Wave

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

                <Wave 
                    size={70} 
                    color1="#22333B" 
                    color2="#EAE0D5" 
                    speed="2s" 
                    opacity={1} 
                />

Circles

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

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

Component Properties

Spin

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

Dots

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

PulseBox

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

Wave

Description	Type	Property
Size of the wave. Default is 30px.	`string`	`size`
Color for the first wave. Defaults to "#22333B".	`string`	`color1`
Color for the second wave. Defaults to "#EAE0D5".	`string`	`color2`
Speed of the wave animation.	`string`	`speed`
Opacity of the wave (0 to 1). Defaults to 1.	`number`	`opacity`

Circles

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

Inspiration

We were inspired by the beauty and simplicity of minimalist design. These spinners are intended to enhance user experience without overwhelming the interface.

Special Thanks

A big thank you to our mentors Alex, Amberle and Daniel, and everyone who supported us during this project!