Dynamic Spinner Component for React

A customizable and dynamic spinner component for React applications. The dynamic-spinner component allows you to easily add loading spinners to your React projects, with configurable properties like colors, size, speed, border size, opacity, shape and text. The component supports single or multiple colors with conic gradient and can be styled with various shapes.

Table of Contents

• Installation
• Usage
• Props
• Customization Examples
• Contributing
• License

Installation

To install the dynamic-spinner component using npm, run the following command:

npm install dynamic-spinner

Alternatively, dynamic-spinner can be installed using yarn, the the following command:

yarn add dynamic-spinner

Usage

Once the package is installed, you can import and use the Spinner component in your React project:

import React from 'react';
import { Spinner } from 'dynamic-spinner';

const App = () => (
  <div>
    <Spinner
      size={80}
      colors={['#FF5733', '#33FF57', '#3357FF']}
      speed={1.5}
      text="Loading..."
      shape={50}
      borderSize={5}
      opacity={0.9}
    />
  </div>
);

export default App;

Props

The Spinner component accepts the following customizable props:

| Prop | Type | Default | Description | | ------------- | ------------------- | --------------------------- | -------------------------------------------------------------------------------------------- | | size | number | 50 | Size of the spinner in pixels (width and height). | | colors | array of strings | ['#4285F4', '#DB4437', '#F4B400', '#0F9D58'] | Array of colors for the spinner. A gradient will be applied if more than one color is provided.| | speed | number | 1 | Speed of the spinner animation, in seconds. | | text | string | "" | Optional text to display below the spinner. | | shape | number | 50 | Controls the shape of the spinner through border-radius. A value of 50 gives a circle, 0 for a square. Value is in % | | opacity | number | 1 | Opacity of the spinner (between 0 and 1). | | borderSize | number | 4 | Size of the border used for the spinner (affects thickness of the spinner). Value is in pixels. |

Example of colors Prop:

• If you pass an array of colors, the spinner will apply a conic-gradient around the border using those colors.
• For example:

colors={['#FF5733', '#33FF57', '#3357FF']}

will apply a gradient from orange, green, and blue.

Customization Examples

Here are some ways you can customize the spinner:

1. Single Color Circle Spinner

<Spinner size={60} colors={['#3498db']} speed={1} shape={50} />

2. Multi-Color Square Spinner

<Spinner size={80} colors={['#f00', '#0f0', '#00f']} speed={2} shape={0} borderSize={8} />

3. Spinner with Loading Text

<Spinner size={70} colors={['#FF6347', '#4682B4']} text="Please wait..." />

4. Fast Spinner with Transparent Opacity

<Spinner size={100} colors={['#FF5733', '#C70039']} speed={0.5} opacity={0.5} />

Contributing

We welcome contributions! If you want to report a bug, request a feature, or submit a pull request, please check out the Contributing Guidelines.

To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Push to your branch and submit a pull request.

License

This project is licensed under the ISC License.