Placeholder for indicating loading items.
<div class="zust-placeholder">
<div class="zust-header"></div>
<div class="zust-details">
<div class="zust-image"></div>
<div>
<div class="zust-line"></div>
<div class="zust-line"></div>
</div>
</div>
<div class="zust-paragraph">
<div class="zust-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="zust-image"></div>
</div>
Make a line in placeholder by adding a div with class zust-line.
<div class="zust-placeholder">
<div class="zust-line"></div>
</div>
You can make bunch of lines by adding a div with class zust-lines. Add as much div inside it as you want. A child div makes a line.
<div class="zust-placeholder">
<div class="zust-lines">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
You can make a paragraph by adding a div with class zust-paragraph and add other contents inside it.
<div class="zust-placeholder">
<div class="zust-paragraph">
<div class="zust-lines">
<div></div>
<div></div>
</div>
</div>
<div class="zust-paragraph">
<div class="zust-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
You can make a header by adding a div with class zust-header.
<div class="zust-placeholder">
<div class="zust-header"></div>
</div>
You can make an image by adding a div with class zust-image.
<div class="zust-placeholder">
<div class="zust-image"></div>
</div>
You can make a detail item too. See the snippet below.
<div class="zust-placeholder">
<div class="zust-details">
<div class="zust-image"></div>
<div>
<div class="zust-line"></div>
<div class="zust-line"></div>
</div>
</div>
</div>
You can make any item with any size. Just set the item's CSS property color to var(--placeholder-holder-color).