Introduction

The idea is to lock elements that are loading (while working with Ajax request, for example) but keeping the rest of the page available to the user.

Getting started

  1. Install from Bower

    $ bower install jquery-loading-indicator
  2. Include jquery, jquery-loading and jquery-loading stylesheet in your page:

  3. Call the plugin in the element you want to add the loading state:

    Init loading.

    $('#loading').loading({ circles: 3 });

    Hide loading indicator from its container.

    $('#loading').loading({ hide: true});

    Destroy loading indicator from its container.

    $('#loading').loading({ destroy: true });

Basic usage

Interstellar

In the film, a crew of astronauts travel through a wormhole in search of a new home for humanity.

Endurance
  • $('.card-loading-1')
    .loading({ 
      circles: 1, 
      overlay: true 
    });

Interstellar

In the film, a crew of astronauts travel through a wormhole in search of a new home for humanity.

Endurance
  • $('.card-loading-2')
    .loading({ 
      circles: 2, 
      overlay: false //default 
    });

Interstellar

In the film, a crew of astronauts travel through a wormhole in search of a new home for humanity.

Endurance
  • $('.card-loading-3')
    .loading({ 
      circles: 3, 
      overlay: true
    });

Available options

$('#loading').loading({
    overlay: false, // add an overlay background
    width: null, // set fixed width to loading indicator, otherwise calculated relative to element
    indicatorHtml: "",
    overlayHtml: "",
    base: 0.9, // indicator's width/height relative to element
    circles: 3, // number of indicator circles: maximum is 3
    top: null, //indicator position relative to the top of its container
    left: null, //indicator position relative to the left of its container
    hide: false, // hide the indicator of the current element
    destroy: false //remove the indicator from the DOM
});