my-awesome-spinner

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).