@sakit-sa/react-spinner NPM

@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.

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

sakit-sa spinner react javascritp component

prop-types

@infinitebrahmanuniverse/nolb-_sak @everything-registry/sub-chunk-802 @sakit-sa/react-button @zalastax/nolb-_sak

1.0.1

3 years ago

1.0.0

3 years ago