The Skeleton control displays feedback to the user that a content is still loading in the shape of text, circle, square, or rectangle.
/* Small Circle */
new ac.loaders.Skeleton({ shape: "Circle", width: "32px" }, "#skeletonCircleSmall");
/* Medium Circle */
new ac.loaders.Skeleton({ shape: "Circle", width: "48px" }, "#skeletonCircleMedium");
/* Large Circle */
new ac.loaders.Skeleton({ shape: "Circle", width: "64px" }, "#skeletonCircleLarge");
/* Extra Large Circle */
new ac.loaders.Skeleton({ shape: "Circle", width: "80px" }, "#skeletonCircleExtraLarge");<div class="d-flex a-demo-skeleton-pane flex-wrap">
<div id="skeletonCircleSmall"></div>
<div id="skeletonCircleMedium"></div>
<div id="skeletonCircleLarge"></div>
<div id="skeletonCircleExtraLarge"></div>
</div>/* Top Rectangle */
new ac.loaders.Skeleton({ shape: "Rectangle", width: "100%", height: "100px" }, "#skeletonRectangleFull");
/* Left Rectangle */
new ac.loaders.Skeleton({ shape: "Rectangle", width: "25%", height: "35px" }, "#skeletonRectangleLeft");<div class="d-flex a-demo-skeleton-pane flex-wrap">
<div id="skeletonRectangleFull"></div>
<div id="skeletonRectangleLeft"></div>
</div>/* Small Square */
new ac.loaders.Skeleton({ shape: "Square", width: "32px" }, "#skeletonSquareSmall");
/* Medium Square */
new ac.loaders.Skeleton({ shape: "Square", width: "48px" }, "#skeletonSquareMedium");
/* Large Square */
new ac.loaders.Skeleton({ shape: "Square", width: "64px" }, "#skeletonSquareLarge");
/* Extra Large Square */
new ac.loaders.Skeleton({ shape: "Square", width: "80px" }, "#skeletonSquareExtraLarge");<div class="d-flex a-demo-skeleton-pane flex-wrap">
<div id="skeletonSquareSmall"></div>
<div id="skeletonSquareMedium"></div>
<div id="skeletonSquareLarge"></div>
<div id="skeletonSquareExtraLarge"></div>
</div>/* Small Text */
new ac.loaders.Skeleton({ width: "25%", height: "16px" }, "#skeletonTextSmall1");
/* Medium Text */
new ac.loaders.Skeleton({ width: "50%", height: "16px" }, "#skeletonTextMedium");
/* Extra Large Text */
new ac.loaders.Skeleton({ width: "100%", height: "16px" }, "#skeletonTextExtraLarge");
/* Small Text */
new ac.loaders.Skeleton({ width: "25%", height: "16px" }, "#skeletonTextSmall2");
/* Large Text */
new ac.loaders.Skeleton({ width: "85%", height: "16px" }, "#skeletonTextLarge");<div class="d-flex a-demo-skeleton-text-pane flex-wrap">
<div id="skeletonTextSmall1"></div>
<div id="skeletonTextMedium"></div>
<div id="skeletonTextExtraLarge"></div>
<div id="skeletonTextSmall2"></div>
<div id="skeletonTextLarge"></div>
</div>