Skip to content
<hrc />

@hrc/spinner

Simple spinner components for your React app

Demo generated with code from Usage section

Installation

Terminal window
npm install @hrc/spinner

Usage

import { DualRingSpinner, GrowingSpinner, RingSpinner } from "@hrc/spinner";


export function PackageDemo() {
  return (
    <>
      <RingSpinner size="large" color="primary" />
      <DualRingSpinner color="error" />
      <GrowingSpinner />
    </>
  );
}

Props

All props are optional unless otherwise specified.

The following props are available for all spinner components:

color

The color variant of the spinner.

Type: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'

size

The size variant of the spinner.

Type: 'small' | 'large'

speed

The speed variant of the spinner.

Type: 'slow' | 'fast'

className

Additional class names for extending styles.

Type: string

CSS Variables

You can customize any spinner by using the following CSS variables (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;
}

CSS Classes

The following css classes are used by all spinner components:

.spinner

The base styles for the spinner.

.spinner--primary

Styles for the primary color variant.

.spinner--secondary

Styles for the secondary color variant.

.spinner--error

Styles for the error color variant.

.spinner--warning

Styles for the warning color variant.

.spinner--info

Styles fot the info color variant.

.spinner--success

Styles for the success color variant.

.spinner--small

Styles for the small size variant.

.spinner--large

Styles for the large size variant.

.spinner--slow

Styles for the slow speed variant.

.spinner--fast

Styles for the fast speed variant.

Details

Default speed

The default speed of the spinner.

Value: 1.2s

Slow speed

The slow speed of the spinner.

Value: 1.5s

Fast speed

The fast speed of the spinner.

Value: 0.9s

Demos

For examples and details on the usage of the components, see the demo pages:

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for spinner components: