Skeleton Loading Screen With jQuery And CSS3 - avnSkeleton

avnSkeleton is a jQuery plugin used to create a customizable, CSS3 animated, Facebook inspired skeleton preview of your web content while waiting for async data.

See also:

• Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader

How to use it:

1. To use this plugin, include the following JavaScript and CSS files on the web page.

<!-- Style sheet-->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3BavnSkeleton.css%26quot%3B%26gt%3B%26lt%3B!--%2520JavaScript%2520--%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520integrity%3D%26quot%3Bsha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr%2FrE9%2FQpg6aAZGJwFDMVNA%2FGpGFF93hXpG5KkN%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3BavnPlugin.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3BavnSkeleton.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fpre">
2. Call the plugin with options on your content wrapper.
<article class="wrapper">
  <header></header>
  <main></main>
</article>

$('.wrapper').avnSkeleton({

  // default configs
  cssPrefix: 'avn-skeleton',
  header: {
    selector: '> header',
    lines: 2,
    icon: true,
    loader: true
  },
  main: {
    selector: '> main',
    paragraphs: 3,
    lines: 4
  }
  
});

3. Disable the skeleton screen.
$('.wrapper').avnSkeleton('remove');

4. Show the skeleton screen.
$('.wrapper').avnSkeleton('display');


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





Prev: Asynchronous Image Loading with jQuery - hbaLoadImages.js 
Next: Detect If Images Have Been Completely Loaded - jQuery imageReady