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="avnSkeleton.css">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="avnPlugin.js"></script>
<script src="avnSkeleton.js"></script>

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.