jMyLoader is a jQuery plugin that helps provide visual feedback to users while loading components on a web page.
circular loader css, circular loader material ui, css loading spinner example, page loader jquery example, css loader gif
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,
});Circular Corner Loader with jQuery and CSS3, JMyLoader Plugin/Github
See Demo And Download
Official Website(kevinmuller): Click Here
This superior jQuery/javascript plugin is developed by kevinmuller. For extra Advanced Usages, please go to the official website.