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	Description
`borderColor`	The color of the spinner's border. Default is "currentColor".
`borderBottomColor`	The color of the spinner's bottom border. Default is "currentColor".
`borderLeftColor`	The color of the spinner's left border. Default is "currentColor".
`borderRightColor`	The color of the spinner's right border. Default is "currentColor".
`borderTopColor`	The color of the spinner's top border. Default is "transparent".
`customClasses`	Additional CSS classes for the spinner.
`customStyles`	Custom styles for the spinner.
`hidden`	Indicates whether the spinner should be hidden.
`id`	The unique identifier for the spinner element.
`size`	The size of the spinner. Default is 1.
`speed`	The animation speed of the spinner. Default is "1s".
`tabIndex`	The tab index of the spinner for keyboard navigation.
`thickness`	The thickness of the spinner's border. Default is 3.
`variant`	The spinner variant, which can be "solid", "dashed", "dotted", "double", or "unstyled". Default is "solid".

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 borderColor="#f6eeee" borderTopColor="red" />

Spinner with multiple border colors

<Spinner
  borderTopColor="red"
  borderRightColor="green"
  borderBottomColor="blue"
  borderLeftColor="yellow"
/>

Custom Styles and Classes

<Spinner
  customStyles={{ background: 'gray', borderRadius: '50%' }}
  customClasses="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.