Itqualityassurance
Skeleton screens serve a similar function as spinners and other loading animations: a visual cue that the user must wait a bit for content to load. Unlike spinners, however, skeleton screens create an illusion of progress.
- When should you not use skeleton loading?
- Why use skeleton loading?
- What is a spinner loading?
- How do you implement skeleton loading?
When should you not use skeleton loading?
A skeleton loader shouldn't be used in combination with a spinner, choose the one that fits the use case best.
Why use skeleton loading?
A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded. They let the user know that some content is loading and, more importantly, provide an indication of what is loading, whether it's an image, text, card, and so on.
What is a spinner loading?
A loading spinner is generally a branded element with a looping animation that indicates loading is in process and where it will appear. Avoid showing multiple loading spinners on a single page.
How do you implement skeleton loading?
Create a new file index. html and write some HTML for the layout inside a parent <div> with class=”profile-container”. Add class=”skeleton” to every element in order to apply the skeleton screen loading effect. You'll be removing this class when the content is loaded using JavaScript.
