Circular Corner Loading Components With jQuery and CSS3 | jmyloader

circular-jmyloader-css

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.