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.
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
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
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 |
---|---|---|
Colors for each dot. Minimum 2 colors required. | array of strings | colors |
Size of each dot in pixels. Default is 8. | number | size |
Duration for dot animation (default: 0.5s). | string | duration |
PulseBox
Description | Type | Property |
---|---|---|
Colors for pulse animation. Minimum 2 colors required. | array of strings | color |
Duration for pulse animation (default: 0.5s). | string | duration |
Size of pulse box (default: 80). | number | size |
Wave
Description | Type | Property |
---|---|---|
Size of the wave. Default is 70px. | string | size |
Color(s) for the wave animation. | array of strings | color |
Speed of the wave animation. | string | speed |
Circles
Description | Type | Property |
---|---|---|
Size of each circle. | number | size |
Duration of the animation for the circles. | 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!