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
2 . Include react-dotdotdotloader component
<DotDotDotLoader />
3 . Customize options
<DotDotDotLoader amount=3 show=thisstateshowLoader 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
No text styles
CSS
2 . Bigger font and red color
HTML
Bigger font and red font color
CSS
3 . dotdotdotloader can have its own styles
HTML
dotdotdotloader can have its own styles
CSS