react-dotdotdotloader

react-dotdotdotloader

An ellipsis loader for React. You can set the time in between the next dot appears and the number of dots that appear.

Demo

http://craiglu.react-dotdotdotloader.hellodeploy.com

Installation

npm install react-dotdotdotloader

Usage

Using NPM

1 . Require react-dotdotdotloader after installation

import { DotDotDotLoader } from 'react-dotdotdotloader'

2 . Include react-dotdotdotloader component

<DotDotDotLoader />

3 . Customize options

<DotDotDotLoader 
  amount={3}
  show={this.state.showLoader}
  interval={500}
  repeat={true}
/>

Options

Option	Type	Description
amount	Integer	Max number of dots to display. (Default is 3)
show	Boolean	True will show the loader and false will hide the loader. (Required to show and hide loader)
interval	Integer	The number of ms between each dot appearing. (Default is 500)
repeat	Boolean	True will have the loader loop from one dot to the amount. If false loader will not loop and ignore amount, adding dots indefinitely until show is false (Default is true)

Styles

react-dotdotdotloader will inherit any styles from its parent container. This allows the loader to have the same style as other components in the same contianer or have its own style. Use the same css properties as if you were changing text styling to change the look of the dots. See live demo for example.

1 . No text styling

HTML

<div className="noStyle">
 No text styles
 <DotDotDotLoader
   amount={this.state.amount}
   interval={this.state.interval}
   repeat={this.state.repeat}
   show={this.state.show}
 />
</div>

CSS

.noStyle {
   margin-bottom: 50px;
}

2 . Bigger font and red color

HTML

<div className="redStyle">
 Bigger font and red font color
 <DotDotDotLoader
   amount={this.state.amount}
   interval={this.state.interval}
   repeat={this.state.repeat}
   show={this.state.show}
 />
</div>

CSS

.redStyle {
   margin-bottom: 50px;
   font-size: 20px;
   color: #e53030;
}

3 . dotdotdotloader can have its own styles

HTML

<div className="greenStyle">
   dotdotdotloader can have its own styles
   <span className="dotStyle">
     <DotDotDotLoader
       amount={this.state.amount}
       interval={this.state.interval}
       repeat={this.state.repeat}
       show={this.state.show}
     />
   </span>
 </div>

CSS

.greenStyle {
   color: #63ba1b;
}
.dotStyle {
   font-size: 100px;
   color: #a22dbc;
}