React Spinners Component Library

Beautiful, customizable React spinner components for loading states and UI feedback.

Live Example

Visit https://spinners-zeta.vercel.app/

Features

• 50+ unique spinner designs, all in one component
• Fully configurable via props: size, color, speed, border width, etc.
• Pure CSS animations for smooth performance
• Typeahead search for spinner names
• Live customization controls
• Usage code examples for every spinner
• No dependencies except React

Installation

npm install @rishikesh-janrao/spinners

Usage

import Spinner from '@rishikesh-janrao/spinners';

<Spinner
  type="ring"           // or 1
  size={3}              // rem
  color="#61dafb"
  speed={1}             // seconds
  borderWidth={4}       // px
/>

Props

Prop	Type	Description	Example/Unit
type	number/string	Spinner type or name (1-50, or name from list)	1, "ring"
size	number	Size of spinner (rem)	3 (rem)
color	string	Primary color	"#61dafb"
secondaryColor	string	Secondary color	"#fff"
backgroundColor	string	Background color	"#282c34"
speed	number	Animation speed (seconds)	1 (seconds)
borderWidth	number	Border thickness (px)	4 (px)

Spinner Types

You can use either a number (1-50) or a name (e.g., "ring", "dual", "dots", etc.) for the type prop. See the full list in src/data/spinnerNames.js.(visit https://spinners-zeta.vercel.app/ to get type number)

Live Demo & Customization

• The main app (src/App.js) provides a live demo with:
  • SearchBar: Typeahead search for spinner names
  • SpinnerGrid: Displays all spinner types in a grid
  • Controls: Adjust size, speed, border, and colors
  • UsageExample: Shows code for the selected spinner

Component Structure

• Spinner.js: Core spinner component (all logic, 50 types)
• SpinnerGrid.js: Grid layout for all spinners
• SpinnerCard.js: Individual spinner card
• Controls.js: Customization controls
• SearchBar.js: Typeahead spinner search
• UsageExample.js: Code usage display
• data/spinnerNames.js: List of spinner names
• data/spinnerExamples.js: Usage code for each spinner

Styling

• Each component has its own CSS file for modular styling.
• All spinner animations are in Spinner.css.

How to Add New Spinners

• Add logic to Spinner.js for the new type.
• Add a name to spinnerNames.js.
• Optionally, add a usage example to spinnerExamples.js.

License

MIT