react-top-loader

26 | react-top-loader 27 |

29 |

37 | Progress Indicator 38 |

39 | 40 |

42 |

50 | Animated 51 |

52 | 58 |

60 |

68 | Animated (no background) 69 |

70 | 71 |

73 |

81 | Indeterminate 82 |

83 | 89 |

91 |

99 | Indeterminate (no background) 100 |

101 | 102 |

33 |

44 |

45 | ); 46 | } 47 | } 48 | 49 | class IndeterminateLoader extends React.Component { 50 | state = { 51 | visible: false, 52 | loading: false 53 | }; 54 | 55 | isIndeterminate = () => 56 | this.props.progress === undefined || this.props.progerss === null; 57 | 58 | loop = () => { 59 | this.setState({ loading: true }, () => 60 | setTimeout(() => this.setState({ loading: false }), this.props.duration) 61 | ); 62 | }; 63 | 64 | setupLoop = () => 65 | setTimeout( 66 | () => 67 | this.setState({ visible: true }, () => { 68 | this.loop(); 69 | this.interval = setInterval(this.loop, this.props.duration + 100); 70 | }), 71 | this.props.delay 72 | ); 73 | 74 | componentDidMount() { 75 | this.setupLoop(); 76 | } 77 | 78 | componentWillUnmount() { 79 | clearInterval(this.interval); 80 | } 81 | 82 | render() { 83 | const { 84 | progress, 85 | color, 86 | backgroundColor, 87 | thickness, 88 | duration, 89 | progressDuration, 90 | fixed, 91 | style, 92 | zIndex, 93 | ...rest 94 | } = this.props; 95 | const { loading, visible } = this.state; 96 | return !visible ? null : ( 97 |

112 |

120 |

134 |

135 |

136 | ); 137 | } 138 | } 139 | 140 | class TopLoader extends React.Component { 141 | render() { 142 | const { show, ...rest } = this.props; 143 | if (!show) { 144 | return null; 145 | } 146 | if (rest.progress === undefined || rest.progress === null) { 147 | return ; 148 | } else { 149 | return ; 150 | } 151 | } 152 | } 153 | 154 | TopLoader.defaultProps = { 155 | show: false, 156 | duration: 1500, 157 | progressDuration: 100, 158 | thickness: 2, 159 | color: "#03a9f4", 160 | backgroundColor: "transparent", 161 | fixed: true, 162 | delay: 0, 163 | zIndex: 10000 164 | }; 165 | 166 | export default TopLoader; 167 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-top-loader 2 | 3 | Simple fixed-to-top progress bar / loader component for React (similar to sites like GitHub, Medium etc.) 4 | 5 | [![NPM](https://img.shields.io/npm/v/react-top-loader.svg)](https://www.npmjs.com/package/react-top-loader) 6 | 7 | ![demo](./demo.gif) 8 | 9 | ## Installation 10 | 11 | ``` 12 | npm install react-top-loader 13 | ``` 14 | 15 | or 16 | 17 | ``` 18 | yarn add react-top-loader 19 | ``` 20 | 21 | ## Usage 22 | 23 | - Just import `TopLoader` and set the `show` prop to `true`. This will show the indeterminate 24 | loader with looping animation at the top of the page. 25 | - Use the `progress` prop to control the animation manually. 26 | - The loading bar is fixed to top by default. Set `fixed` to `false` to disable it. 27 | 28 | Here are some more examples (from the GIF above): 29 | 30 | ```javascript 31 | import TopLoader from "react-top-loader"; 32 | 33 | const Examples = () => ( 34 |

35 | {/* Fixed to Top with looping animation */} 36 | 37 | 38 | {/* Progress Indicator */} 39 |

40 | 41 |

42 | 43 | {/* Animated */} 44 |

45 | 51 |

52 | 53 | {/* Indeterminate */} 54 |

55 | 56 |

57 | 58 | {/* Indeterminate (no background) */} 59 |

60 |

Indeterminate (no background)

61 | 62 |

63 |

64 | ); 65 | 66 | // Helper class to animate the loader 67 | class Animator extends React.Component { 68 | state = { progress: 0 }; 69 | 70 | componentDidMount() { 71 | setInterval( 72 | () => this.setState({ progress: Math.min(1, this.state.progress + 0.1) }), 73 | 400 74 | ); 75 | } 76 | 77 | render() { 78 | return ; 79 | } 80 | } 81 | ``` 82 | 83 | ## Props 84 | 85 | | Prop | Type | Default | Required | Description | 86 | | ------------------ | ------------------------------------ | --------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | 87 | | `show` | `boolean` | `false` | yes | Set this to `true` to show the loader | 88 | | `progress` | `null (or) number` (between 0 and 1) | | no | If `undefined` or `null`, indeterminate animated loader is shown. If specified, a fraction of the strip is filled | 89 | | `fixed` | `boolean` | `true` | no | If `true`, loader is shown at the top of the page (`position:fixed`). Otherwise you have to position it yourself | 90 | | `thickness` | `number` | `2` | no | Thickness (height) of the loading strip in pixels (`px`) | 91 | | `color` | `string` | `"#03a9f4"` | no | Color of the loading strip | 92 | | `backgroundColor` | `string` | `"transparent"` | no | Color of the empty region behind the loading strip (transparent by default) | 93 | | `delay` | `number` (milliseconds) | `0` | no | Show the loader after a specified delay (use this to prevent flashing of loader of very short tasks/requests) | 94 | | `duration` | `number` (milliseconds) | `1500` | no | Duration of the animation of the indeterminate loader (not applicable if `progress` is provided) | 95 | | `progressDuration` | `number` (milliseconds) | `400` | no | If you're changing the value of `progress` to animate the loader, then use this to control the speed of animation | 96 | | `zIndex` | `number` | `10000` | no | Z-Index of the top-level loader `div` | 97 | | `className` | `string` | | no | Specify a custom class for the top-level `div` | 98 | | `style` | `object` | | no | Override styles for the top-level `div` | 99 | 100 | ## Credits 101 | 102 | Developed by the [Jovian.ml](https://www.jovian.ml) team. Released under the MIT Licence. Inspired by [this Codepen example](https://codepen.io/bootpen/pen/WQQLQZ) by Shahen Algoo. 103 | --------------------------------------------------------------------------------