What is jMyLoader?

jMyLoader is a jQuery plugin that helps to provide a visual feedback to your users while loading components on a webpage.

Default loader

Default implementation of jMyLoader. The loader is loaded in the main window, and can be used by several components.

In a container

Demo of a container implementation. The loader is set inside a container, with a gif image for the spinner.

With a theme

Another demo of the loader inside a container. This time, we use a different theme : the blue theme.

jMyloader doesn't take care of loading your components, since only you know how to do that properly. It only takes care of giving a nicely looking visual feedback about the status of the loading. It does this only, but does it well! The plugin is highly customizable. Below is a list of features :

  • can be easily called by several components on the same time
  • handles percent, and number of items
  • can be loaded inside the main window, or a container
  • themeable
  • responsive
  • cross browser compatibility : Firefox 1.5+, IE 9.0+, Safari 2.0+, Opera 9.0+

It takes only 6Kb!

download github

How does it work?

It works only with a few lines of code :

The files to insert in your HTML

<link href='/css/jmyloader/css/jmyloader.css' rel='stylesheet'/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="/js/jmyloader/js/build/jmyloader-full.min.js"></script>

The Javascript code

For initialization.

$('body').jMyLoader();

You can then proceed by telling the plugin how much percents are loaded :

$('body').jMyLoader('set-percent', 100);

Or by settings the number of items, and how many of them are loaded :

$('body').jMyLoader('set-total-items', 10);
// Will load 100%.
$('body').jMyLoader('increment-loaded-item', 10);

This is also possible :.

var jml = $('body').jMyLoader();
jml.setPercent(100);

JMyLoader has a lot of configuration options :

Optionusage
sizesize of the loader in pixels. Default is 300px. Depending on the size, the loader wil adjust automatically.
hideAtStartWhether the loader should be hidden after instantiation.
themewhich theme to use, as per the css. 2 base themes are provided : default (orange), and 'blue'.
spinnerwhat to use for the spinner. 'image', or 'doughnut'. Image is an animated gif. Doughnut is a canvas animation in the shape of a doughnut.
spinnerImagename of the image to use as a spinner. If not provided, a default image will be used.
texttext to display to the user. Default is "please wait... content is loading".
doughnutsettings for the doughnt : width, height, textSize, duration, transition, thickness. All these settings are provided by default.

You can also interact with jMyLoader with its api :

functionoption nameusage
showshowshow the loader.
hidehidehide the loader.
setPercent(percent)set-percentset the current percent. at 100, the loader will hide automatically.
setTotalItems(int nbItems)set-total-itemsset total number of items (in this mode, the percent will be set automatically).
incrementLoadedItem(int nbLoadedItems (optional))increment-loaded-itemincrement number of items loaded. If no parameter given, increment of 1, otherwise increment of nbLoadedItems.
addItemsadd-itemsadd items to the total. Useful when multiple components are interacting with a global loader.
loaderExistsloader-existstell if there is a loader in the current container.
resetresetreset the loader to zero.

Why this plugin?

This plugin was created as part of our e-learning platform Click On French. We use it to give a feedback to our users while we load multimedia content.

Credits

jMyLoader is a free software based on JQuery and the canvas library D3.

Licence

jMyLoader is under the GPL V3 licence onwards. You can freely modify and redistribute it. A copy of the licence is included in the archive.