react-loading-indicators

A kit of elegant _loading indicators_ to enhance waiting experience of users when your system has something to do in the background for a while.

Built with Typescript. Type safety and improved DX guaranteed.

A demo for your insights

A glimpse of what is wrapped 🎁.

See DEMO page.

Installation

``
npm install react-loading-indicators
`

Components

`jsx












`

Examples

$3

`jsx
import { Atom } from "react-loading-indicators";
/*
| OR directly pull it 😎
| import Atom from "react-loading-indicators/Atom";
*/

const Loading = () => ;

export default Loading;
`

$3

This library is kept at fairly small. You have an option to even shrink further what you include from this library.

You can directly pull a loading indicator you want:

`jsx
import React from "react";
import OrbitProgress from "react-loading-indicators/OrbitProgress";

const Loading = () => (

);

export default Loading;
`

$3

Each of these components will accept the following _optional props_.

| Name | DataType | Default Value | Possible Values |
| :-------: | :-------------------: | :-------------------: | :---------------------------------------------------------------------------------------------------------: |
| size | string | medium | small, medium, large |
| color | string or array | limegreen | CSS color values |
| style | object | null | CSS styles(in Reactjs format) |
| text | string or boolean | false | Boolean value or string |
| textColor | string | undefined | CSS color values |
| speedPlus | number | 0 | Number in the range -5 through 5 |
| easing | string | default ease function | CSS easing function |

#### What do these props do?

- size - Sets the size of the loading indicator.
- color - Sets the color of the loading indicator.
- style - Applies CSS to the loading indicator. This will style the outer element that wraps an indicator.
- text - Displays message in the loading indicator.
- textColor - Sets the color of text message in the loading indicator.
- speedPlus - Controls speed of animation. _Negative_ values slows down. _Positive_ numbers speeds up animation. 0 is normal speed.
- easing - Controls the smoothness of the animation, altered with values such as linear, ease-in.

and have more than one variant of loading animation. You can pick an alternative animation using a variant prop.

| Name | DataType |
| :-----: | :------: |
| variant | string |

supports the following variants: dotted, spokes, disc, split-disc, track-disc. Defaults to disc.

has the following variants: pulsate, bounce, bob, brick-stack. Defaults to pulsate.

You can have an interactive run-through of the variants in the DEMO site.

$3

You can resize a loading indicator to fit into your needs with the size prop that accepts predefined string values.

For more size customization, you can specify a fontSize property in the style prop. A valid value for the fontSize property will _evenly_ alter the animation's size, for example:

`jsx
const Loading = () => ;
`

License

Distributed under the MIT License. See LICENSE` for more information.

Contact

@smitterhane