<p>
<button class="card-button button-load" onClick="loadContent()">Load content</button>
</p>
<ul>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
<li>
<div class="card loading">
<img width="200" height="200" class="card-image loading-item" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
<h3 class="card-title loading-item"></h3>
<p class="card-description loading-item"></p>
<button class="card-button loading-item">Card button</button>
</div>
</li>
</ul>
<script>
function loadContent() {
/* Select everything */
var body = document.querySelector("body");
var cards = document.querySelectorAll(".card");
var loadBtn = document.querySelector(".button-load");
var cardImages = document.querySelectorAll(".card-image");
var cardTitles = document.querySelectorAll(".card-title");
var cardButtons = document.querySelectorAll(".card-button");
var cardDescriptions = document.querySelectorAll(".card-description");
var cardVisuallyHidden = document.querySelectorAll(".visually-hidden");
var hasLoaded = body.classList.contains("content-loaded");
/* Toggle content - simulate asynchronus loading and toggle ARIA labels */
function unloadContent(i) {
cardTitles[i].innerHTML = "";
cardDescriptions[i].innerHTML = "<br/><br/><br/>";
cardImages[i].src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII";
cards[i].classList.add("loading");
}
function loadContent(i) {
cardTitles[i].innerHTML = "Card title";
cardDescriptions[i].innerHTML = "This is a description text that can span three lines at most and if we add more content...";
cardImages[i].src = "https://placekitten.com/200/200";
cards[i].classList.remove("loading");
}
if (hasLoaded) {
body.classList.remove("content-loaded");
loadBtn.innerHTML = "Load content";
for (let i = 0; i < cardImages.length; i++) {
unloadContent(i);
}
} else {
body.classList.add("content-loaded");
loadBtn.innerHTML = "Unload content";
for (let i = 0; i < cardImages.length; i++) {
loadContent(i);
}
}
}
</script>
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing:inherit;
}
body {
padding: 2rem;
font-family: Arial, sans-serif;
max-width: 680px;
margin: 0 auto;
line-height: 1.4;
position: relative;
}
img {
display: block;
max-width: 100%;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(190px, 1fr));
grid-column-gap: 1em;
}
li {
padding: 0;
margin: 0;
}
.card-image {
margin-bottom: 1em;
}
.card-title {
font-size: 1.25em;
margin: 0;
font-family: "Times New Roman", serif;
text-transform: uppercase;
border-bottom: 0.1em solid hsl(39, 100%, 50%, 0.25);
padding-bottom: 0.25em;
}
button {
border-width: 0;
cursor: pointer;
background: none;
}
.card-button {
border-radius: 0.3em;
border-bottom: 0.3em solid darkgoldenrod;
background-color: orange;
display: block;
width: 100%;
padding: 0.5em 1em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsla(0,0%,0%,0.7);
}
.card-button:hover {
background-color: darkorange;
}
.card {
border-bottom: 0.2em solid goldenrod;
padding: 2em 0.25em;
}
.card-description {
max-height: 4.75em;
background-color: hsl(39, 100%, 80%);
overflow: hidden;
padding: 0.5em 1em;
margin: 1.5em 0;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.button-load {
position: fixed;
top: 0;
left: 0;
right: 0;
border-radius: 0;
max-width: 680px;
margin: 0 auto;
}
/***********************************
* Barebones skeleton styles start *
***********************************/
/* Universal skeleton loading styles should only affect the presentation, so all layout styles (dimensions, positioning) should be preserved. We need to make sure that the content is not visible and background & border styles are applied. In theory, these styles should be very robust and can be applied to most layout configs and content types. This skeleton loading styles is implemented in less than 15 lines of code. */
/* These classes are active only if parent has a "loading" class, so all skeleton styles can be easily turned off. */
/* NOTE: Image elements have a skeleton loading style applied to them while they're being (lazy) loaded. It's a simple background color, so when the image is loaded, skeleton loader is not visible.
*/
.loading .loading-item {
/* Hide content and apply basic background and border-color styles. No animation is used, becuase it might look jarring in some cases and it doesn't add too much to UX. */
background: #949494;
color: rgba(0, 0, 0, 0) !important;
border-color: rgba(0, 0, 0, 0) !important;
/* */
user-select: none;
cursor: wait;
}
/* Make sure all child elements are hidden, but preserve their dimensions and layout */
.loading .loading-item * {
visibility: hidden;
}
/* Make sure that an element has at least a whitespace character as a child so it displays properly. This is useful when no text placeholder is present (element is empty). */
.loading .loading-item:empty::after,
.loading .loading-item *:empty::after {
content: "\00a0";
}
/* Multi-row skeleton loaders can be added by adding <br/> elements. I assume that all children (content) elements get replaced with actual content once it's loaded. */
/*********************************
* Barebones skeleton styles end *
*********************************/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.