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

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.

DescriptionImport StatementName
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 colors={["#22333B", "#FF6F61", "#B7AEA3"]} />

Pulse Box

import { PulseBox } from "@holmesdev/ponder-spinners";
<PulseBox color={["#22333B", "#FF6F61", "#ffa9a1", "#22333B"]} />

Wave

import { Wave } from "@holmesdev/ponder-spinners";
<Wave size="70px" color={["#22333B", "#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

DescriptionTypeProperty
Color 1 of the circular spinner. Defaults to #FF6F61.stringcolor1
Color 2 of the circular spinner. Defaults to #ffa9a1.stringcolor2
Opacity of the color 1. Defaults to 1.numberopacity1
Opacity of the color 2. Defaults to 0.5.numberopacity2
Speed of the rotation (e.g., 1s). Defaults to 1s.stringspeed
Direction of rotation (e.g., 360deg). Defaults to -360deg.stringdirection
The size of the spinner (e.g., 100). Defaults to 100.stringsize

Dots

DescriptionTypeProperty
Colors for each dot. Minimum 2 colors required.array of stringscolors
Size of each dot in pixels. Default is 8.numbersize
Duration for dot animation (default: 0.5s).stringduration

PulseBox

DescriptionTypeProperty
Colors for pulse animation. Minimum 2 colors required.array of stringscolor
Duration for pulse animation (default: 0.5s).stringduration
Size of pulse box (default: 80).numbersize

Wave

DescriptionTypeProperty
Size of the wave. Default is 70px.stringsize
Color(s) for the wave animation.array of stringscolor
Speed of the wave animation.stringspeed

Circles

DescriptionTypeProperty
Size of each circle.numbersize
Duration of the animation for the circles.stringduration

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!