Website Loading Progress Indicator Plugin topbar.js
topbar
Release date: 2018-1-5 0:22
The website loading progress indicator has the following features:
Extremely small (1KB minified and compressed), with no dependencies.
Suitable for single-page applications.
Responsive.
Usage
Installation
Download topbar.js or topbar.min.js and include it in your page.
1 | <script src="path/to/topbar.js"></script> |
Basic Usage
Calltopbar.show()to display the progress bar,topbar.hide()to hide the progress bar. Before topbar.hide() is called, the progress bar moves increasingly slowly, but does not actually reach 100%. In most cases, these two methods are all you need.
1 2 3 4 5 6 7 | $('#btnStartSimple').click(function() { topbar.show()// Show the progress bar})$('#btnStopSimple').click(function() { topbar.hide()// Hide the progress bar}) |
Advanced
Use topbar.config(options) to customize the top bar.
autoRun (default: true): If false, call topbar.progress() manually to run the progress bar.
barThickness (default: 3): Progress bar thickness.
barColors: A list of gradient color stops used to draw the progress bar.
shadowBlur (default: 10): Shadow blur radius.
shadowColor: Shadow color.
Note:topbar.progress() accepts a numeric or string value. If a string is provided, use + or - to change the progress relative to its current position. If no parameter is specified, it returns the current progress (from 0 to 1).