@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