xxxxxxxxxx
.placeholder-hero {
height: 20em;
}
.placeholder-heading {
height: 3em;
width: 55%;
}
.placeholder-sentence {
height: 1.5em;
margin-bottom: 0.5em;
}
.placeholder-sentence-last {
width: 85%;
}
.placeholder-paragraph {
height: 8em;
margin-top: 1.625em;
}
.placeholder-btn {
height: 3em;
width: 8em;
}
.placeholder-thumbnail {
border-radius: 50%;
height: 9em;
width: 9em;
}
.placeholder-hero,
.placeholder-heading,
.placeholder-paragraph,
.placeholder-btn,
.placeholder-thumbnail {
margin-bottom: 1.625em;
}
xxxxxxxxxx
/**
* Setup keyframes for pulsing animation
*/
@-webkit-keyframes loadingPlaceholders {
0% {
background-color: lightgray;
}
50% {
background-color: #e5e5e5;
}
100% {
background-color: lightgray;
}
}
@keyframes loadingPlaceholders {
0% {
background-color: lightgray;
}
50% {
background-color: #e5e5e5;
}
100% {
background-color: lightgray;
}
}
/**
* Style the placeholder
*/
.placeholder {
-webkit-animation: loadingPlaceholders 1.5s ease-in infinite;
animation: loadingPlaceholders 1.5s ease-in infinite;
background-color: #e5e5e5;
}
xxxxxxxxxx
<div class="placeholder placeholder-hero"></div>
<div class="placeholder placeholder-thumbnail"></div>
<div class="placeholder placeholder-paragraph"></div>
<div class="placeholder placeholder-sentence"></div>
<div class="placeholder placeholder-sentence"></div>
<div class="placeholder placeholder-sentence placeholder-sentence-last"></div>
<div class="placeholder placeholder-btn"></div>