How to create a skeleton screen loading effect in HTML, CSS, and JavaScript

0

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


Design the web page

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

with class = “container-profile”. To add class = “skeleton” to each element to apply the skeleton screen loading effect. You will remove this class when the content is loaded using JavaScript.

VIDEO OF THE DAY MAKEUSE

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








Photo by Ian Dooley on Unsplash



John Doe


Software Engineer @ Google || Full Stack Developer || Self Taught


Bengaluru, Karnataka, India • Contact info

534 connections








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%);
}
}



Adding a loading effect

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:


Styling the components

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

const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 4000)
})

To go out:


Skeleton screen loading effect using JavaScript

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.


javascript-concept-blue-background-with-blue-text
What is JavaScript and how does it work?

If you’re new to web development, here’s what you need to know about JavaScript and how it works with HTML and CSS.

Read more


About the Author


Source link

Share.

About Author

Comments are closed.