Chlorophyll
Styles
Skeleton loader
Gives the user a glimpse of what content is going to turn up after data has been loaded into the interface.
Guidelines
Short description
A lot of times data takes time to load after the grid of the page is already there. This can be due to lagging systems or poor connectivity.
The site can then first display a skeleton of the upcoming site component. This skeleton is sometimes combined with a progress bar. When the site has retrieved the data needed, the skeleton is hidden and replaced with the real components filled with data.
The skeleton should graphically mimic the upcoming components and data, although more schematic.
When and how to use it
When a large or important part of a page can’t be displayed rapidly after the page is displayed use the skeleton loader as a placeholder for the upcoming content.
Do not use the skeleton loader if the data is normally loaded very quickly. This will just cause a flickering effect.
Do's and don't
Do
- Use skeleton for areas that takes some time to load (more than 2 seconds)
- Use when the site will appear very empty if it’s not pre-populated with something (to avoid a site that is moving around while loading)
- May be combined with a progress-loader-bar to further signal loading.
Don't
- Don’t use skeleton loading if the content can be loaded very quickly. It will just cause a flickering sensation.
Specification
Animation
The effect is achieved by animating a background, but then covering that background with a white SVG-image with cut-through holes, so the user can see the animation behind it. This enables us to make lots of specific skeletons based on what will be loaded in the area.
Multiple versions, a few base existing from start. Use specific SVG-templates to mimic the content that will be loaded.