Package Exports

@plume-ui-react/spinner
@plume-ui-react/spinner/dist/index.js
@plume-ui-react/spinner/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@plume-ui-react/spinner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Install the package using npm or yarn:

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

Import the stylesheet into your root component file:
```
import '@plume-ui-react/spinner/dist/index.css'
```
Import the component in your JavaScript or TypeScript file:
```
import { Spinner } from '@plume-ui-react/spinner'
```
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.