CSS only

Skeleton

Animated placeholders shown while content loads. SCSS-only: a ng-skeleton container holding lines, circles and rectangles.

Compose a skeleton from ng-skeleton-line (text), ng-skeleton-circle (avatar) and ng-skeleton-rect (media). Size lines with the width helpers w-25 … w-100.

Text lines

skeleton.html
<div class="ng-skeleton">
    <div class="ng-skeleton-line w-75"></div>
    <div class="ng-skeleton-line w-100"></div>
    <div class="ng-skeleton-line w-50"></div>
</div>

Shapes

Circle for avatars, rectangle for images.

skeleton.html
<div class="ng-skeleton">
    <div class="ng-skeleton-circle mb-20"></div>
    <div class="ng-skeleton-line w-60 mb-20"></div>
    <div class="ng-skeleton-line w-40 mb-20"></div>
    <div class="ng-skeleton-rect"></div>
</div>

Anatomy

ng-skeleton ng-skeleton-line ng-skeleton-circle ng-skeleton-rect

Width helpers

w-25 w-40 w-50 w-60 w-75 w-100

Reference

Generated from the component source (_ng_skeleton.scss).

Component info

NameSkeleton
Typecss
Version1.0.0
Statuscss
CSS/assets/css/components/_ng_skeleton.scss

Classes

.ng-skeleton .ng-skeleton-circle .ng-skeleton-line .ng-skeleton-rect

Tokens

--ng-skeleton-animation-speed --ng-skeleton-bg --ng-skeleton-height-line --ng-skeleton-highlight