Ready to make your interfaces more intuitive and expressive by implementing skeleton screens in your own projects? Here’s how to get started.

Design the Web Page Layout

Designing a web page layout helps you crystalize your expectations. You should set your goal, define the layout, add any required pages, and make it accessible and responsive for different screen sizes. For now, consider a simple design with a cover image, profile image, a little text, and call-to-action buttons.

Once you’ve drafted the design of the layout, either using paper or an app like Figma or Adobe XD, it’s time to prepare the HTML structure.

Build the Basic Structure

Create a new file index.html and write some HTML for the layout inside a parent

with class=”profile-container”. Add class=”skeleton” to every element in order to apply the skeleton screen loading effect. You’ll be removing this class when the content is loaded using JavaScript.

Note: Don’t forget to link the CSS and JavaScript files in the header of your index.html file.

Start Styling Your Page

Apply the basic CSS attributes like margin, font-family, and color all over the body.

Add loading effect

To add a loading effect, add an ::after pseudo-element to the skeleton class that moves from the left (-100%) to the right (100%) over a second or two, resulting in a shimmer animation.

Style the Images

Now, let’s style the profile and cover image. Don’t forget to set overflow: hidden; to avoid any inconsistencies.

Make It Responsive

To make sure that your design is responsive on different screens, apply media queries accordingly. If you’re a beginner to web development, you should learn how to use media queries in HTML and CSS because they’re super important when building responsive websites.

Style the Text

Style the text by setting a margin, font-size, and font-weight. You can also change the text color, add a heading, paragraph, or anchor tag according to your preferences. Adding a hover effect to the anchor tag is useful because it lets the user know about a link.

Style the CTA

A Call to Action (CTA) is important because you’ll generally want to convert your users’ visits in some way. Giving it an easily noticeable color will help your CTA stand out on the page.

Output:

Turn Off Skeleton Loading Effect Using JavaScript

Now that you’ve added the leading effect using CSS, it’s time to turn it off using JavaScript. The animation will repeat an infinite number of times by default, but you want it to run only for a few seconds. You can set the time to 4000 milliseconds using setTimeout. It’ll remove the skeleton class from all the elements after 4 seconds.

Note: Make sure to add just before the end of thesection.

Output:

What’s JavaScript and How Does It Work?

You have successfully created a skeleton screen loading effect using HTML, CSS, and JavaScript. Now, whenever anyone requests new content from the server, you can display the skeleton screen loading effect while the data is loading. It’s becoming more of a popular design trend, as you can see it on sites like Google, Facebook, and Slack.

Meanwhile, if you’re new to JavaScript, you can learn the basics by understanding JavaScript and how it interacts with HTML and CSS.