@plume-ui-react/spinner

Spinner

This is a custom React spinner component that allows you to create spinners with various styles and options. You can use this spinner in your React web applications to indicate loading or processing.

Installation

To use this component in your React project, follow these steps:

1. Install the package using npm or yarn:

   npm install @plume-ui-react/spinner
   # Or
   yarn add @plume-ui-react/spinner

2. Import the stylesheet into your root component file:

   import '@plume-ui-react/spinner/dist/index.css'

3. Import the component in your JavaScript or TypeScript file:

   import { Spinner } from '@plume-ui-react/spinner'

4. Use the component in your application:

   <Spinner />

Properties

This component accepts several properties to customize the appearance and behavior of the spinner. Here are the available properties sorted alphabetically:

Property	Type	Description
className	string	Additional CSS classes for the spinner.
colorScheme	DefaultColorPalette | keyof CustomColorPalette	The color scheme to be applied to the spinner.
hidden	boolean	Indicates whether the spinner should be hidden.
id	string	The unique identifier for the spinner element.
size	Size	The size of the spinner.
speed	string	The animation speed of the spinner.
style	CSSProperties	Custom styles for the spinner.
thickness	number	The thickness of the spinner's border.
variant	'solid' | 'dashed' | 'dotted' | 'double' | 'unstyled'	The spinner variant, which can be "solid", "dashed", "dotted", "double", or "unstyled".

Usage Examples

Here are some examples of how you can use this spinner component in your project:

Default Spinner

<Spinner />

Large Spinner with Custom Border Color

<Spinner size={2} borderColor="#FF5733" />

Spinner with empty area

<Spinner
  style={{
    borderColor: '#f6eeee',
    borderTopColor: 'red',
  }}
/>

Custom Styles and Classes

<Spinner style={{ background: 'gray', borderRadius: '50%' }} className="my-custom-spinner" />

This is a versatile spinner component that allows you to create spinners with different styles and behaviors to suit the needs of your React web application. Use it to indicate loading or processing in a visually appealing way.