dynamic-spinner v1.5.0

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:

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.