A simple stripe with animation:
Loading...To set the height place any text inside. For example Loading.... This text will receive the same parameters as the text in place of which placeholder is holding, inheriting line-height.
Height also can be set manually. For example, when we need to hold a place of the paginator. Writing: .catalog__navigation .content-placeholder { height: 40px; }
Most of the time width can be set in the styles file based on observed width of text.
For example this line of text:
Showing 40 of 10,695 results for sale
is always about 200px wide. So in styles file:
.catalog__total .content-placeholder { width: 207px; }
In case of unknown or random width (for example, the names of condos in cards or types and statuses) we can add a random width in inline styles with JS like so:
<span class="content-placeholder" styles="width: 123px;">...</span>