Circular Corner Loading Components With jQuery and CSS3 | jmyloader

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

Optionusage
sizesettings for the doughnut: width, height, text size, duration, transition, and thickness. All these settings are provided by default.
hideAtStartWhether the loader should be hidden after instantiation.
themewhich theme to use, as per the CSS. 2 base themes are provided: default (orange), and ‘blue’.
spinnerwhat 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.
spinnerImagename of the image to use as a spinner. If not provided, a default image will be used.
textsettings for the doughnut: width, height, text size, duration, transition, and thickness. All these settings are provided by default.
doughnutsettings 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

functionoption nameusage
showshowset a total number of items (in this mode, the percent will be set automatically).
hidehidehide the loader.
setPercent(percent)set-percentset the current percent. at 100, the loader will hide automatically.
setTotalItems(int nbItems)set-total-itemsincrement number of items loaded. If no parameter is given, increment of 1, otherwise increment of nbLoadedItems.
incrementLoadedItem(int nbLoadedItems (optional))increment-loaded-itemincrement number of items loaded. If no parameter given, increment of 1, otherwise increment of nbLoadedItems.
addItemsadd-itemsadd items to the total. Useful when multiple components are interacting with a global loader.
loaderExistsloader-existstell if there is a loader in the current container.
resetresetreset the loader to zero.

See Demo And Download

circular-jmyloader-css

Official Website(kevinmuller): Click Here

This superior jQuery/javascript plugin is developed by kevinmuller. For extra Advanced Usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *