Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader

File Size: 2.8 MB
Views Total: 11021
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader

Skeleton Loader is a jQuery loader plugin used to display Facebook-style animated content placeholders while loading your page's content via AJAX requests.

How to use it:

1. Load the jQuery Skeleton Loader plugin into your document and you're 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 element as this:

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


3. Initialize the plugin and define 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');


v1.2.0 (02-11-2021)

  • Added the new feature with the 'selector' option to populate with a specific content from a lodead page 
  • Fixed the problem with IE and remove() method

v1.1.2 (02-10-2021)

  • remove() polyfill for IE


  • added stop loader


  • option incache improved


  • New option SkelParentText



This awesome jQuery plugin is developed by enbifa. For more Advanced Usages, please check the demo page or visit the official website.