1.3.3 • Published 2 years ago
loading-animations-react v1.3.3
Loading Animations for React
A collection of animated loading elements for use with React
View Demo | Report Bug | Request Features
Table of Contents
Installation
npm i loading-animations-react
Usage
- Import the component you would like to use into the appropriate file.
import { Dots } from 'loading-animations-react';
- Use that component in your react code.
<Dots />
Attributes
Each tag has attributes that can be used to customize the component. All attributes are optional.
Global attributes (used by all)
- id \
- sets the components id for styling and referencing.
<Dots id="componentId" />
- className \
- sets the components class for styling and referencing.
<Dots className="componentClass" />
- text \
- sets the text to be displayed winth the component.
<Dots text="Loading..." />
Components specific attributes
Dots
- dotColors \
- Up to six strings defining colors. Standard css color definitions are used.
- Although their are six dots, you can define from 1 to 6 colors. If less than six are given, the component will choose more starting from the beginning of the list supplied.
<Dots dotColors=[ 'red', 'white', 'blue', '#123abc', 'rgb(50,50,50)', 'hsla(235, 100%, 50%, .5)' ] />
- dotColors \
Progreas Bar
- borderColor \
- sliderColor \
sliderBackground \
All three take css colors as strings.
<ProgressBar borderColor="blue" sliderColor="#fff" sliderBackground="rgb(0,0,0)" />
Waves
- waveColor \
backgroundColor \
Both take css colors as strings
<Waves waveColor="cyan" backgroundColor="#000" />
Spinner
- color1 \
- one of the gradient colors
- color2 \
- the other gradient color
textColor \
All three take css colors as strings.
<Spinner color1="blue" color2="#fff" textColor="rgba(0,0,0, 0.5)" />
- color1 \
Minimal Spinner
- color \
- takes a css color string
<MinimalSpinner color="blue" />
- color \
Trinity Spinner
- color \
- takes a css color string
<TrinitySpinner color="blue" />
- color \
License
Distributed under the MIT License. See LICENSE
for more information.
Contact
Project Link: https://github.com/michael-joseph-miller/loading-animations-react