Loading Animations for React

A collection of animated loading elements for use with React

View Demo | Report Bug | Request Features

Table of Contents

• Installation
• Usage
• Attributes
  • Global attributes (used by all)
  • Components specific attributes
• License
• Contact

Installation

npm i loading-animations-react

Usage

1. Import the component you would like to use into the appropriate file.

   import { Dots } from 'loading-animations-react';

2. 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 <string>
  • sets the components id for styling and referencing.

  <Dots id="componentId" />

• className <string>
  • sets the components class for styling and referencing.

  <Dots className="componentClass" />

• text <string>
  • sets the text to be displayed winth the component.

  <Dots text="Loading..." />

Components specific attributes

• Dots

  • dotColors [<string>]
    • 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)' ] />

• Progreas Bar

  • borderColor <string>

  • sliderColor <string>

  • sliderBackground <string>

    All three take css colors as strings.

    <ProgressBar
      borderColor="blue"
      sliderColor="#fff"
      sliderBackground="rgb(0,0,0)"
    />

• Waves

  • waveColor <string>

  • backgroundColor <string>

    Both take css colors as strings

    <Waves waveColor="cyan" backgroundColor="#000" />

• Spinner

  • color1 <string>

    • one of the gradient colors

  • color2 <string>

    • the other gradient color

  • textColor <string>

    All three take css colors as strings.

    <Spinner color1="blue" color2="#fff" textColor="rgba(0,0,0, 0.5)" />

• Minimal Spinner

  • color <string>
    • takes a css color string

    <MinimalSpinner color="blue" />

• Trinity Spinner

  • color <string>
    • takes a css color string

    <TrinitySpinner color="blue" />

License

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

Contact

Project Link: https://github.com/michael-joseph-miller/loading-animations-react