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 me

Installation

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

1. Download & copy this package's "dist" folder into your web server's public folder eg. ``public/js/dist/*`. 2. Rename "dist" to "busy" eg.`public/js/busy`3. Load the busy script at the end of your web page (before the closingbodytag) like this:`...

`4. When the browser loads, busy will be attached to the browser's global window object. Use it anywhere in your scripts like this:`

`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

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

Option	Type	Description	Default
id	string	unique id (enabling a specific loader to be stopped)	''

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


These dependencies are bundled (as separate pre-built 'chunks') in this package's "dist" folder.  


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