dynamic-spinner

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.