An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
CSS skeleton loading screen animation
In this tutorial well 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 well create a skeleton screen for a video card component thatll 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. Well 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 well 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;
Heres 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, heres 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.
Original Link: https://dev.to/michaelburrows/css-skeleton-loading-screen-animation-gj3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To