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.