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 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
- 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>
You can then proceed by telling the plugin how much percents are loaded :
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 :
|size||size of the loader in pixels. Default is 300px. Depending on the size, the loader wil adjust automatically.|
|hideAtStart||Whether the loader should be hidden after instantiation.|
|theme||which theme to use, as per the css. 2 base themes are provided : default (orange), and 'blue'.|
|spinner||what to use for the spinner. 'image', or 'doughnut'. Image is an animated gif. Doughnut is a canvas animation in the shape of a doughnut.|
|spinnerImage||name of the image to use as a spinner. If not provided, a default image will be used.|
|text||text to display to the user. Default is "please wait... content is loading".|
|doughnut||settings 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 :
|show||show||show the loader.|
|hide||hide||hide the loader.|
|setPercent(percent)||set-percent||set the current percent. at 100, the loader will hide automatically.|
|setTotalItems(int nbItems)||set-total-items||set total number of items (in this mode, the percent will be set automatically).|
|incrementLoadedItem(int nbLoadedItems (optional))||increment-loaded-item||increment number of items loaded. If no parameter given, increment of 1, otherwise increment of nbLoadedItems.|
|addItems||add-items||add items to the total. Useful when multiple components are interacting with a global loader.|
|loaderExists||loader-exists||tell if there is a loader in the current container.|
|reset||reset||reset 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.
jMyLoader is a free software based on JQuery and the canvas library D3.
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.