Busy
A beautiful animated loader with a js busy queuing system.
busy.start('fetching dinner', 30, true); // modal spinner with 30 second timeout
window.setTimeout( function () {
busy.stop('fetching dinner') // stop spinner after 10 seconds
}, 10000);
Features
- Easy to use.
- Lazy loading (small initial page load).
- Usable as a webpack/ES6 module or a pre-built browser bundle.
- Loaders can be 'modal', and are queued allowing for representation of multiple slow operations.
Demo
Try meInstallation
Busy is a javascript package built for and using the ES6 module system, but it's also provided as a pre-built, minified browser package (in this package's "dist" folder).Browser
- Download & copy this package's "dist" folder into your web server's public folder eg.
public/js/dist/*. - Rename "dist" to "busy" eg.
public/js/busy - Load the busy script at the end of your web page (before the closing
bodytag) like this:
<body>
...
<script src="/js/busy/busy.js"></script>
</body>
</html>
- When the browser loads, busy will be attached to the browser's global window object. Use it anywhere in your scripts like this:
<button>Target</button>
<script>
busy.start('test-1', 15); // start a loader
busy.start('test-2', 60); // register another loader
...
busy.stop('test-1'); // stop the specified loader
...
busy.reset(); // clear all loaders
</script>
ES6 module
Install the busy package into your project using npm:$ cd to/your/project $ npm install @aamasri/busy
Then import and use it in your project's ES6 modules:
Static import
import busy from 'busy';function fetchDataFromApi() { busy.start('fetching data', 10, true); }
Dynamic import
Leveraging Webpack's on-demand (lazy) loading and code-splitting:import(/* webpackChunkName: "busy" */ 'busy').then((busy) => {
busy.start('loading');
fetch(api....)
.then(data => {
busy.stop('loading');
...
})...
});
Busy Functions
busy.start(id, timeout, modal) // create a new loader instance
busy.stop(id) // stop a specific loader instance
busy.reset() // close all loaders (clear busy queue)
busy.queue // the actual busy queue object
Busy.start Options
| Option | Type | Description | Default |
|---|---|---|---|
| id | string | unique id (enables it to be stopped later) | '' |
| timeout | int | undefined | timeout (in seconds) after which loader will stop automatically. | 7 seconds |
| modal | boolean | undefined | background blurring & dimming | false |
Busy.stop Options
| Option | Type | Description | Default |
|---|---|---|---|
| id | string | unique id (enabling a specific loader to be stopped) | '' |
Package Management
Busy supports npm under the name @aamasri/busy.
NPM
$ npm install @aamasri/busy --save
Dependencies
@aamasri/busy depends on 2 external packages:- jquery
- @aamasri/dom-utils
Invoking the busy.start() function will dynamically load these dependencies at run-time (if these scripts don't already exist on the page) and they'll be added to the global window object.
Publishing Updates
- Increment the "version" attribute of `package.json`.
- Update the "versionDescription" string of `package.json`.
- Re-build the browser output bundle...
npm run build-production
...and observe that webpack completed with no errors.
- Test the bundle by loading page: "dist/index.html" in a browser (setup a development webserver).
- Publish to the git repository and npm package registry:
npm run publish
Authors
- Ananda Masri
- And awesome contributors