🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

loading-indicator loader

Documentation

jquery-skeleton

Show skeleton screen during asynchronous data loading

Usage

Html fragment:

<article class="wrapper">   <header></header>   <main></main> </article>

jQuery plugin:

$('.wrapper').avnSkeleton({   cssPrefix: 'avn-skeleton',   header: {     selector: '> header',     lines: 2,     icon: true,     loader: true   },   main: {     selector: '> main',     paragraphs: 3,     lines: 4   } });

Plugin methods:

// Remove the skeleton when real content is available $('.wrapper').avnSkeleton('remove');  // Display again the skeleton $('.wrapper').avnSkeleton('display');

Installation and build

npm install npm run build

Open a local server

npm start

Screenshot

Skeleton screen


You May Also Like