This content originally appeared on DEV Community and was authored by Michael Burrows
In this tutorial we’ll be using CSS to create an animated skeleton loading screen. Skeleton loading screens provide an approximate representation of a site layout while a page is loading data. This lets users know that the content is loading and unlike a full page loading screen individual elements of the page can be loading in gradually using this technique.
Today we’ll create a skeleton screen for a video card component that’ll look like this:
For the HTML we only require is single empty <div> element:
<div class="video"></div>`
Now we can start with the CSS. We’ll use the :empty pseudo-class that will only display the skeleton when the video <div> is empty (including whitespace) and disappear once content has been injected. Developers often use a toggle class to achieve the same effect but this solution is much simpler:
.video:empty {
width: 315px;
height: 250px;
cursor: progress;
}
The video component contains 4 elements, a semi transparent overlay that we’ll animating to give the illusion of data being fetched, then skeleton representations of a thumbnail, avatar and title text. These 4 elements are created using background CSS gradients. For the skeleton elements we achieve a solid color by using the same color value for both gradient endpoints:
background:
linear-gradient(0.25turn, transparent, #fff, transparent),
linear-gradient(#eee, #eee),
radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
linear-gradient(#eee, #eee);
background-repeat: no-repeat;
Now we need to define the size for each of these elements:
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
Next specify the keyframe animation to be used:
animation: loading 1.5s infinite;
Here’s what the complete .video class looks like:
.video:empty {
width: 315px;
height: 250px;
cursor: progress;
background:
linear-gradient(0.25turn, transparent, #fff, transparent),
linear-gradient(#eee, #eee),
radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
linear-gradient(#eee, #eee);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
animation: loading 1.5s infinite;
}
Final thing to do is add the @keyframes animation to the first gradient by shifting the x-axis of the background position to the right hand edge of the parent element. You could also experiment with animating the opacity here for extra visual appeal:
@keyframes loading {
to {
background-position: 315px 0, 0 0, 0 190px, 50px 195px;
}
}
You can now test this code out in a browser, here’s what it should look like:
Hopefully you found this tutorial useful and it serves as a good starting point for building all types of different skeleton loading screens. If you are having trouble figuring out the whole background gradient thing try starting with a single skeleton element before adding additional elements.
This content originally appeared on DEV Community and was authored by Michael Burrows
Michael Burrows | Sciencx (2021-05-17T23:49:23+00:00) CSS skeleton loading screen animation. Retrieved from https://www.scien.cx/2021/05/17/css-skeleton-loading-screen-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.