Skeleton (loading animation)
Skeleton is a CSS class that provides a loading animation for elements. It can be used to indicate that an element
is loading or that the user has to wait for the content to be loaded. The monster-skeleton-col-xxx
classes define
the look of the skeleton. The xx defines the width of the skeleton in percent. monster-skeleton-col-100
is the
widest skeleton and monster-skeleton-col-10
is the narrowest skeleton.
The monster-skeleton-animated
class defines the animation.
<div class="monster-skeleton-col-100 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-90 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-80 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-70 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-60 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-60 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-40 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-30 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-20 monster-skeleton-animated">.</div>
<div class="monster-skeleton-col-10 monster-skeleton-animated">.</div>