Skeleton screens are integral to retaining visitors in modern design trends. They create the illusion of speed and manage user expectations by keeping them informed about the state of a page’s content. One of the most essential but underrated solutions offered by skeleton displays is their help in avoiding Cumulative Layout Shift (CLS), allowing content to be displayed all at once rather than sequentially during of its load.
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 layout helps you crystallize your expectations. You need to define your goal, define the layout, add the required pages and make it accessible and responsive for different screen sizes. For now, consider a simple design with a cover image, profile image, some text, and call-to-action buttons.
Once you’ve drafted the layout design, using paper or an application 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 HTML for the layout inside a parent
To note: Don’t forget to link the CSS and JavaScript files in the header of your index.html to file.
Skeleton Screen Loading Effect
John Doe
Software Engineer @ Google || Full Stack Developer || Self Taught
Bengaluru, Karnataka, India • Contact info
Start styling your page
Apply basic CSS attributes like margin, font family, and Color on all the body.
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
Add a loading effect
To add a loading effect, add a ::after pseudo-element to the skeleton class that moves from left (-100%) to right (100%) over a second or two, resulting in a shimmering animation.
.skeleton {
position: relative;
width: max-content;
overflow: hidden;
border-radius: 4px;
background-color: #1e2226 !important;
color: transparent !important;
border-color: #1e2226 !important;
user-select: none;
cursor: default;
}.skeleton img {
opacity: 0;
}
.skeleton::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0)
);
animation: shimmer 2s infinite;
content: '';
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
Stylize the images
Now let’s style the profile and the cover image. Don’t forget to pay hidden overflow; to avoid any inconsistency.
img {
width: 100%;
vertical-align: middle;
}.profile-container {
width: 95%;
max-width: 780px;
margin: 0 auto;
border-radius: 8px;
margin-top: 32px;
background-color: #1e2226;
overflow: hidden;
position: relative;
}
.cover-img {
width: 100%;
overflow: hidden;
background-color: #1e2226;
aspect-ratio: 4 / 1;
}
.profile-img {
border-radius: 50%;
width: 160px;
height: 160px;
border: 4px solid #000;
background-color: #1e2226;
margin: 0 auto;
position: relative;
overflow: hidden;
bottom: 100px;
}
Make it responsive
To ensure that your design is responsive on different screens, apply media queries accordingly. If you are new to web development, you should learn how to use media queries in HTML and CSS as they are very important when building responsive websites.
@media (max-width: 560px) {
.profile-img {
width: 100px;
height: 100px;
bottom: 60px;
}
}
Styling the text
Style the text by defining a margin, font size, and police-weight. You can also change the text color, add a title, 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.
.profile-text {
margin-top: -80px;
padding: 0 16px;
}.profile-text h1 {
margin-bottom: 0;
font-size: 24px;
overflow: hidden;
}
.profile-text p {
margin: 4px 0;
overflow: hidden;
}
.profile-text h5 {
margin-top: 4px;
font-size: 14px;
margin-bottom: 8px;
font-weight: 400;
color: #ffffff99;
overflow: hidden;
}
.profile-text a {
color: #70b5f9;
font-size: 14px;
text-decoration: none;
font-weight: 600;
}
.profile-text a:hover {
color: #70b5f9;
text-decoration: underline;
}
Style the CTA
A call to action (CTA) is important because you’ll usually want to convert your users’ visits in some way. Giving it an easily noticeable color will help your CTA to stand out on the page.
.profile-cta {
padding: 16px 16px 32px;
display: flex;
}
.profile-cta a {
padding: 6px 16px;
border-radius: 24px;
text-decoration: none;
display: block;
}.message-btn {
background-color: #70b5f9;
color: #000;
}
.more-btn {
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.9);
margin-left: 8px;
}
To go out:
Disable the skeleton loading effect using JavaScript
Now that you’ve added the main 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 only run for a few seconds. You can set the time to 4000 milliseconds using setTimeout. This will remove the skeleton class from all elements after 4 seconds.
To note: Be sure to add just before the end of the
const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 4000)
})
To go out:
What is JavaScript and how does it work?
You have successfully created a skeleton screen loading effect using HTML, CSS, and JavaScript. Now whenever someone requests new content from the server, you can view the skeleton screen loading effect while data is loading. It’s becoming more of a popular design trend, as you can see on sites like Google, Facebook, and Slack.
Meanwhile, if you are new to JavaScript, you can learn the basics by understanding JavaScript and how it interacts with HTML and CSS.
Read more
About the Author
