Draw Skeleton Backgrounds with Sass
Empty State Skeletons are basically placeholders giving an immediately visible idea for content that is not present at the moment.
This technique is used by a companies like Slack, Medium or Facebook to give an illusion of time. While the content is not loaded, the user sees the content already and its not a passive waiting time.
A good article about this topic is Perception Management via Smashing Magazine.
How can this done?
A detailed example how to build skeleton screens is available on css-tricks. There are multiple possibilities to draw skeletons with CSS:
- Use inline SVG background image or multiple backgrounds. While its important to be inlined, otherwise a network delay will destroy the effect.
- Use ::before and ::after-pseudo elements with css-shapes
(Gallery with a lot of examples: http://enjoycss.com/gallery/)
- Use multiple background gradients that simulates blocks and circles
I’m sure there are tons of other methods to achieve this, and I am more than curious finding other methods in the comments section below. In this article we will focus on the third method using multiple background gradients simulating blocks and circles.
Why background gradients?
Gradients can be used to define multiple backgrounds while simple colors can’t. Using gradients as backgrounds gives you limited shapes — basically rectangles with linear-gradient and circles with radial-gradient — together they can be combined to a powerful outcome.
This method also is pretty lightweight and can be compressed easily because of repeating patterns. (How gzip algorithm works)
GPU accelerated animations are possible as well when using background gradients.
Although all the pros — there is at least one downside. Manually creating and orchestrating multiple backgrounds can be painful. If we look at a simple example like:
Automize and simplify with Sass
Luckily there is a helper available to draw and manage multiple backgrounds using Sass.
empty-state is a collection of Sass mixins and functions to simplify the process drawing empty state skeleton backgrounds. These states are often used to provide an indication how the content that is loading is looking and it will be replaced when content is loaded.
To install this empty-state skeleton builder you you can run:
npm install empty-state --save
Then import the mixins in your Sass file like:
The base concept of empty-state can be seen as:
- Create a list of shapes
circle, circle-outline, rect, rect-outline, lines
- Pass the list of shapes in a mixin called skeleton($shapes…)
- skeleton() generates the background-properties
Drawing functions and mixins
Empty-state provided the following shapes to draw:
A simple rectangle with rect
An outlined rectangle with rect-outline
Please note that the return of rect-outline is a list of two shapes, one for the outline and another one for the inner rectangle that simulates an inner empty.
Drawing a circle
Note: The diameter is de-facto just a radius, since the radial gradient will just be draw until 50% and change to transparent color then.
Drawing an outlined circle
$fill : #ffffff
Note: Here we use the three-dots at the end to destruct the list to an argslist in Sass.
Multiple lines interface
Example when last line is not a full block:
Note: In this last example we have used center as x-parameter this way we simply center the shapes.
Include custom background shapes
You can create custom backgrounds simply by using the shape-Function
Note: In the example we have used an external reference as a background. In a real usage we recommend to use a Data-URI having a delay free rendering.
Lets go a bit fancier drawing a skeleton for a video
Good to know
- Backgrounds are stacked in the reversed direction of z-index. So the second background is behind the first background.
- Use :empty-selector for skeletons when you inject content to the element
- Since these are backgrounds, you will have to ensure the element has a given width (if not a block-element) and height.
- Use media-queries to make the backgrounds responsive