how create skeleton loading screen with custom CSS
This simple tutorial covers in practice steps to make a custom skeleton loading screen with CSS. With CSS pseduo-class solid shapes are stimulated using gradients. These shapes comes to live before content is added.
This is achieved Using `:empty` a CSS pseduo-class which shows skeleton loading screen background only while container is in a loading state.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty for more insight.
Skeleton loading screen has many names given to it by the different users depending on how it was applied. To some, it is called content loaders, others called skeleton loading screens, mirage elements, and content placeholders.
The skeleton loading screen is not a new thing in the programming world. Many giant companies in the likes of Facebook, Youtube, Linkedin, has this effect implemented in their web applications and websites, as you may have noticed before now.
Although, achieving this may have been a bit complex for some developers especially newbies before now, this tutorial presents a simple way you can.
Every website owner or developer wants to give their visitors a seamless experience and make our web application load as quick as possible, there opting for a skeleton loading screen is a great way to achieve this.
When content is added to the container element, the pseudo-class selector won’t match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.
Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
Quick shortcut to the content this lesson
What Are Skeleton Loading Screens?
Skeleton Loading Screen is an animated placeholder that simulates the layout of a website into view while data is loading state.
These simple tricks let the user think that some content is loading and as well provide a clue of what is loading, it could be an image, text, or both of them. It also creates a notion that the website is faster for visitors because they already started visualizing the type of content loading before its full appearance.
Here is an excellent example of a skeleton loading screen from Facebook
Types of skeleton loading screens
Currently, we have 2 major types of skeleton screens:
1. Content Placeholders
2. Color Placeholders
Content Placeholders
Content Placeholders are generally light gray structures that appears like boxes and circles that depict the structure of the page. This can seen on popular website application like Facebook and LinkedIn.
An example
Color Placeholders
Color Placeholders on the other hand are colored boxes that simulate the user interface layout of a web page.
The Color Placeholders is more difficult to makee than the content placeholder, and the reasons that it does not only simulate not only the layout of a web page but also the dominant color.
An excellent example of this is mostly found on picture-based websites such as Pinterest and Unsplash. as you can see from the diagram below
Example from Pinterest
Importance Of Skeleton Loading Screens
To ensure that visitors have a seamless experience when they visit your website or web application comes the need to make users remain captivated and not bored as they tried to open your website.
» Skeleton loading screen is a great way to ensure that since content placeholder and color placeholder tends to appear much faster and are more user-friendly.
» It equally help to improved perceived performance which in-turn provides both good user experience and helps in increasing conversion rate.
Making skeleton loading screens with CSS
Following this two simple steps below you can now make your skeleton loading screens.
Step one: Make A HTML container
<div class="skelecton"></div>
Step Two: Make A CSS
.skelecton:empty{
margin: auto;
width: 100%;
height: 600px;
background-image:
radial-gradient(circle 50px at 50px 50px,lightgray 99%, transparent 0 ),
linear-gradient(100deg, rgba(255,255,255,0),
rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%),
linear-gradient(lightgray 20px, transparent 0),
linear-gradient(lightgray 20px, transparent 0),
linear-gradient(lightgray 20px, transparent 0),
linear-gradient(lightgray 20px, transparent 0);
background-repeat: repeat-y;
/*YOU CAN ALWAY CHANGE 'background-size:' TO TAKE A NEW STRUCTURE see example 2*/
background-size:
100px 200px,
50px 200px,
150px 200px,
350px 200px,
300px 200px,
250px 200px;
background-position:
0 0,
0 0,
120px 0,
120px 40px,
120px 80px,
120px 120px;
animation: shine 1s infinite;
}
Step Three: Animate the solids in 2
@keyframes shine {
to {
background-position:
0 0,
100% 0,
120px 0,
120px 40px,
120px 80px,
120px 120px;
}
}
Sample Output 1
Custom CSS for example 2
/*YOU CAN FORMAT THE 'background-size:' TO SUIT YOU NEED*/
background-size:
100px 200px,
50px 200px,
200px 200px,
200px 200px,
200px 200px,
50px 200px;
Sample Output 2
Conclusion
Congratulations! You made it all the way to the end! Now that You’ve learned about the simple tricks behind skeleton loading screen. Remember! that it contributes to user experience by simply making this loading illusion of speed when loading data in a web page or application.
I hope you found this simple tricks explained in this lesson is useful for to make more skeleton loading screens for web application.
Leave a Reply