Skip to main content Accessibility Feedback

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.

An example of placeholder content

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.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips