Mecha Pay Spinners

A collection of beautiful, customizable React spinner loader components for your applications.

Installation

npm install mecha-pay-spinners

Usage

Import the spinner components you need:

import { 
  DotSpinner, 
  CircleSpinner, 
  BounceSpinner, 
  PulseSpinner 
} from 'mecha-pay-spinners';

function App() {
  return (
    <div>
      <DotSpinner size={40} color="#3b82f6" speed={1} />
      <CircleSpinner size={40} color="#3b82f6" speed={1} />
      <BounceSpinner size={40} color="#3b82f6" speed={1} />
      <PulseSpinner size={40} color="#3b82f6" speed={1} />
    </div>
  );
}

Components

DotSpinner

A three-dot bouncing spinner animation.

CircleSpinner

A rotating circular spinner with a gradient border.

BounceSpinner

Three balls bouncing up and down in sequence.

PulseSpinner

A pulsating circle that scales and fades.

Props

All spinner components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 40 | Size of the spinner in pixels | | color | string | "#3b82f6" | Color of the spinner (any valid CSS color) | | speed | number | 1 | Animation speed multiplier (higher = faster) | | className | string | "" | Additional CSS class name |

Examples

Custom Size and Color

<DotSpinner size={60} color="#ff6b6b" />

Faster Animation

<CircleSpinner speed={2} />

With Custom Styling

<BounceSpinner 
  size={50} 
  color="#4ade80" 
  className="my-custom-class" 
/>

TypeScript

This package includes TypeScript definitions. The SpinnerProps interface is exported for your convenience:

import { SpinnerProps } from 'mecha-pay-spinners';

License

MIT

Author

Frank2006x