Press "Enter" to skip to content

JQuery Plugin For Creating A Screen Skeleton Loader | jquery.skeleton.loader

Skeleton Loader is a jQuery loader plug-in used to display Facebook-style animated content placeholders while your page content is loaded via AJAX requests.

datatable skeleton loader, skeleton loading js, skeleton loading examples, skeleton screen loading effect, js skeleton loading

How to make use of it:

1. Download the jQuery Skeleton Loader plugin into your document and you are ready to go.

<link href="jquery.skeleton.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scheletrone.js"></script>

2. Create a container object like this:

<div class="demo" id="skeletone">
  
  ...

</div>

3. Configure the plugin and specify the path to the external data source to be loaded into the document.

var instance = $('#skeletone').scheletrone({
    url : "data.html"
});

4. More configuration options.

var instance = $('#skeletone').scheletrone({

    // if you have to pass data on querystring
    ajaxData: {},

    // debug options
    debug: {
        log: false,
        latency: 0
    },

    // mask an element's text, especially when incache is true
    maskText: false,

    // By default the main element of all text type nodes (nodetype = 3) is sketched (with background = #ccc). 
    // If you want to avoid it, and in some cases it is necessary, just make the valure to false.
    skelParentText: true,

    // exclude the iframes of the page to be scanned (to avoid security issues)
    removeIframe: false,

    // contain background images
    backgroundImage: true,

    // To apply a css class to the images maked skeleton, typically to apply a placeholder. 
    // In the attached css file a class, named ".bg-image" is already available where you can add the placeholder in a base64 format
    replaceImageWith: '',

    // save the template into local storage
    incache: false,

    // if you want to retrieve only a specific content from a loaded page use this option with a selector expression
    selector: false,

    // callback
    onComplete: function() {
      console.info('default onComplete() event');
    }
    
});

Facebook-like Content Placeholder Plugin, jquery skeleton loader Github


See Demo And Download

Official Website(enbifa): Click Here

This superior jQuery/javascript plugin is developed by enbifa. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.