@sakit-sa/react-spinner

Simple, easy spinner for React

Spinner

Live Playground

For examples of the react-spinner in action, go to https://abdilar.github.io/react-spinner.

OR

To run that demo on your own computer:

• Clone this repository
• npm install
• npm run storybook
• Visit http://localhost:6006/

Getting Started

Install

npm install @sakit-sa/react-spinner

Usage

import React from 'react';

import Spinner, {POSITIONS, MODE, NAME} from '@sakit-sa/react-spinner';
import '@sakit-sa/react-spinner/dist/index.css';

const App = () => (
  <Spinner
    isLoading={true}
    name={NAME.PUFF}
    mode={MODE.INSIDE}
    position={POSITIONS.CENTER}
  />
);

Props

Name	Type	Default	Description
isLoading	boolean	false	Boolean value to control whether the spinner is shown.
name	string	uikit	Specifies the name of the spinner (name includes: uikit, puff, grid, oval, rings, ball-triangle, tail-spin, three-dots).
mode	string	inside	Specifies the mode of the spinner (mode includes: inside, full).
className	object	{}	Apply a className to the control
overlay	boolean	false	Boolean value to control whether the spinner has an overlay.
blur	boolean	false	Boolean value to set the blur of the spinner background.
dark	boolean	false	Boolean value to set the darkness of the spinner background.
id	string	spinner-[randomNumber(10000)]	The unique identifier for the component.
ratio	number	1	Specifies the size of the spinner.
color	string	''	Specifies the color of the spinner (color format: #ff00bb, rgb(124, 100, 0), rgb(100%, 2.5%, 0%), rgba(255, 0, 0, 0.5), hsl(140, 2%, 50%), hsla(140, 2%, 50%, 0.5)).
position	string	CENTER	Specifies the position of the spinner (position includes: BOTTOM, CENTER, LEFT, RIGHT, TOP).

className Token

wrapper spinner

See examples for more information (go to https://abdilar.github.io/react-spinner/?path=/story/theme-prop--class-name)

License

MIT © Saeed Abdilar