jMyLoader is a jQuery plugin that helps provide visual feedback to users while loading components on a web page. jMyLoader is it a free program based on JQuery and the Canvas D3 library?
Default loader
The default implementation of jMyLoader. The loader is loaded in the main window and can be used by several components.
jMyloader doesn’t care about loading your components, because only you know how to do it right. It only cares about giving good-looking visual feedback about the loading status. It just does this, but it does it so well! The plugin is highly customizable.
Here is the list of features:
- It can be easily called by several components at the same time
- Handles percentage and number of items
- It can be loaded inside the main window or container
- Theme
- responsive
- Browser cross compatibility: Firefox 1.5+, IE 9.0+, Safari 2.0+, Opera 9.0+
It takes only 6 kb!
Must Read: Simple Full-Screen Loading Spinner Library | H5Loading.js
How to make use of it:
1. Load the jQuery library and jQuery jmyloader plugin into the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/build/jmyloader-full.min.js"></script>
2. Load the required jmyloader.css file into the header section of the document.
<link href="css/jmyloader.css" rel="stylesheet">
3. Call the plugin to display the content loader on page load.
$('body').jMyLoader();4. Available options.
$('body').jMyLoader({
/**
* size of the loader. A value in pixels should be given.
*/
size : 300,
/**
* should the loader be hidden at start. (so we can show it later).
*/
hideAtStart : false,
/**
* class to be added to the container at the initialization.
*/
initClass : 'has-jmyloader',
/**
* main class to be added to the jmyloader element.
*/
mainClass : 'jmyloader',
/**
* class to be added to the container that will contain jmyloader.
*/
containerClass : 'jmyloader-container',
/**
* class to be added to the wrapper.
*/
wrapperClass : 'jmyloader-wrapper',
/**
* class to be added when jmyloader is visible.
*/
visibleClass : 'visible',
/**
* theme to be applied. This theme should be defined in a css file.
* Existing themes : 'blue'
*/
theme : null,
/**
* What type of spinner is required.
* 2 options : 'doughnut' for the animated doughnut chart, or
* image for any animated or fixed image.
*/
spinner : 'doughnut',
/**
* image to load in case the spinner is an image.
* this image should be in the css directory of the plugin.
*/
spinner_image : 'spinner.gif',
/**
* What text is to be displayed.
*/
text : '<strong>Please wait</strong><br>content is loading...',
/**
* Mainly for internal use. Don't touch.
*/
jmlId : 0,
/**
* Doughnut settings.
*/
doughnut : {
/**
* width of the doughnut.
* A value in pixels, or auto to size it automatically.
*/
width : "auto",
/**
* Height of the doughnut.
* A value in pixels, or auto to size it automatically.
*/
height : "auto",
/**
* Size of the text inside the doughnut (percent).
*/
textSize : "auto",
/**
* Duration of the animation.
*/
duration : 500,
/**
* Duration of the transition.
* It is the animation of the doughnut from one value to another one.
*/
transition : 200,
/**
* Thickness of the doughnut.
* A value in pixels, or auto to size it automatically.
*/
thickness : "auto"
}
},
radius : 0,
nbItems : 0,
currentItem : 0,
});Options
JMyLoader has a lot of configuration options:
Must Read: Simple Loading Page With HTML, CSS, and JavaScript | BluryLoading
| Option | usage |
|---|---|
| size | settings for the doughnut: width, height, text size, duration, transition, and thickness. All these settings are provided by default. |
| 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’. The image is an animated gif. The 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 | settings for the doughnut: width, height, text size, duration, transition, and thickness. All these settings are provided by default. |
| doughnut | settings for the doughnt : width, height, textSize, duration, transition, thickness. All these settings are provided by default. |
API
You can also interact with jMyLoader with its API:
Must Read: Lazy Loading With Blurred Image Effect Using Javascript
| function | option name | usage |
|---|---|---|
| show | show | set a total number of items (in this mode, the percent will be set automatically). |
| 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 | increment number of items loaded. If no parameter is given, increment of 1, otherwise increment of nbLoadedItems. |
| 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. |
See Demo And Download
Official Website(kevinmuller): Click Here
This superior jQuery/javascript plugin is developed by kevinmuller. For extra Advanced Usage, please go to the official website.
