Adding placeholder content to your JavaScript web app

Depending on which parts of your user interface you’re rendering with JavaScript and how you’re fetching your data (Ajax vs. local storage, and so on), there may be parts of your UI that aren’t ready when the page first loads.

Placeholder content—sometimes called an app shell—can help improve the perceived load time of your app.

Your placeholders mimick the completed layout of the app. They’re typically gray, and often have a slight animation to them to imply that the real content is loading.

Let’s look at how to use them in your web app.

Creating placeholders

Placeholder content can be created with just a little bit of HTML and CSS. First, create a <div> and add the .placeholder class.

<div class="placeholder"></div>

Then we’ll add this CSS to our app.

/**
 * 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;
}

Customizing Placeholders

While the CSS above adds the basic functionality, you’ll want to style your placeholders to match the layout of your app.

I use a handful of modifier classes to create different shapes to match my content.

.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;
}

And you use them like this.

<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>

Here’s a working demo.