CircularSpinner Component

The CircularSpinner component is a customizable loading spinner built using React and styled-components. It features smooth animations and adjustable properties for color, speed, size, and direction of rotation.

Installation

To use the CircularSpinner component, you need to have React and styled-components installed in your project. You can install styled-components using npm:

npm install styled-components

Usage

import React from "react";

import { CircularSpinner } from "./path/to/CircularSpinner";

const App = () => {

return (

Loading...

<CircularSpinner

color1="#D97292"

color2="blue"

opacity1={0.5}

opacity2={1}

speed="1s"

direction="-360deg"

size="80"

/>

);

};

export default App;

Props

The CircularSpinner component accepts the following props:

| Prop | Type | Default | Description | | ----------- | -------- | --------- | ------------------------------------------------------ | | color1 | string | #D97292 | Primary color of the spinner. | | color2 | string | blue | Secondary color of the spinner. | | opacity1 | number | 0.5 | Opacity for the primary color. | | opacity2 | number | 1 | Opacity for the secondary color. | | speed | string | 2s | Speed of the rotation animation (CSS time format). | | direction | string | -360deg | Direction of the rotation (e.g., -360deg, 360deg). | | size | string | 100 | Size of the spinner (width and height in pixels). |