loadbar is a lightweight loading bar, vanilla javascript, no css, no dependency plugin to create a minimal loading progress bar that can be attached to any container or the entire document.
Options
options.height
type: <String>
The height of the bar is limited to 4px.
Default: 2px
options.backgroundColor
type: <String>
Color of the bar.
Default: #000
options.easeFunction
type: <Function>
For the function of bar easing, you can use your custom function.
Default: const easing = (t, b, c, d) => c * t / d + b
NOTE: Every easing function should contain four arguments.
Pure CSS Cross-Browser Loading Animations | whirl.css
How to make use of it:
1. Include the minified version of the loadbar plugin at the bottom of the webpage.
<script src="loadbar.min.js"></script>
2. Create a new Loadbar instance.
var loadbar = new Loadbar();
3. Start Loadbar.
loadbar.start();
4. Configure Loadbar using the following options.
new Loadbar({ height: '2px', backgroundColor: 'blue', easeFunction: easing, zIndex: 999, pausePoint: 90 })
5. More API methods.
loadbar.stop(); loadbar.pause(); loadbar.done(); loadbar.loading(); loadbar.growTop(50); // goto 50%
Slim Progress/Loading Bar In Native JavaScript, loadbar Plugin/Github
See Demo And Download
Official Website(nichenqin): Click Here
This superior jQuery/javascript plugin is developed by nichenqin. For extra advanced usage, please go to the official website.