@hdoc-react/spinner NPM

@hdoc-react/spinner

Simple spinner component for your React app

demo

Installation

npm install @hdoc-react/spinner

Usage

import { RingSpinner } from "@hdoc-react/spinner";

function App() {
  return (
    <>
      <RingSpinner />
    </>
  );
}

Props

size

The size of the spinner.

Type: 'small' | 'large'

speed

The speed of the spinner.

Type: 'slow' | 'fast'

color

The color of the spinner.

className

Additional class names for extending styles.

Type: string

Customization

CSS Custom Properties

You can customize the spinner by using the following CSS custom properties:

.any-parent-of-spinner,
.class-to-extend-styles {
  --spinner-size: 24px;
  --spinner-color: black; /* default color */
  --spinner-animation-duration: 1s;

  /* COLOR VARIANTS */
  --primary: lightblue;
  --secondary: lightgray;
  --error: red;
  --warning: orange;
  --info: skyblue;
  --success: green;
}