React dotdotdot loader or ellipsis loader
npm install react-dotdotdotloader[download-image]: https://img.shields.io/npm/dm/react-dotdotdotloader.svg?style=flat-square
[download-url]: https://www.npmjs.com/package/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.
sh
npm install react-dotdotdotloader
`Usage
Using NPM1 . Require react-dotdotdotloader after installation
`js
import { DotDotDotLoader } from 'react-dotdotdotloader'
`2 . Include react-dotdotdotloader component
`js
`3 . Customize options
`js
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
`html
No text styles
amount={this.state.amount}
interval={this.state.interval}
repeat={this.state.repeat}
show={this.state.show}
/>
` CSS
`css
.noStyle {
margin-bottom: 50px;
}
`
2 . Bigger font and red color HTML
`html
Bigger font and red font color
amount={this.state.amount}
interval={this.state.interval}
repeat={this.state.repeat}
show={this.state.show}
/>
` CSS
`css
.redStyle {
margin-bottom: 50px;
font-size: 20px;
color: #e53030;
}
`3 . dotdotdotloader can have its own styles
HTML
`html
dotdotdotloader can have its own styles
amount={this.state.amount}
interval={this.state.interval}
repeat={this.state.repeat}
show={this.state.show}
/>
` CSS
`css
.greenStyle {
color: #63ba1b;
}
.dotStyle {
font-size: 100px;
color: #a22dbc;
}
``