Placeholder Loading Animation.

Read Time:45 Second

Simple and flexible, css only, content placeholder loading animation.

npm install placeholder-loading --save

<div class="ph-item">
    <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
            <div class="ph-col-6 big"></div>
            <div class="ph-col-4 empty big"></div>
            <div class="ph-col-2 big"></div>
            <div class="ph-col-4"></div>
            <div class="ph-col-8 empty"></div>
            <div class="ph-col-6"></div>
            <div class="ph-col-6 empty"></div>
            <div class="ph-col-12"></div>
        </div>
    </div>
</div>

grid classes: .ph-col-2, .ph-col-4, .ph-col-6, .ph-col-8, .ph-col-10, .ph-col-12
elements inside: .ph-avatar and .ph-picture
use .big for bigger text line