Published on | Prototyping: From UX to Front End — Medium Raphael

Empty State Skeletons are basically placeholders giving an immediately visible idea for content that is not present at the moment.

Skeleton view of Slack while loading.

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:

Skeleton for a simple “Profile” elementManaging all these magic numbers could be quite hard

Automize and simplify with Sass

Luckily there is a helper available to draw and manage multiple backgrounds using Sass.

https://github.com/wildhaber/empty-state

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:

@import '~empty-state/skeleton';

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

rect(
    $color,
    $width,
    $height,
    $x,
    $y
)

Example:

rect(yellowgreen, 100%, 12px, 0px, 0px)<a href="https://medium.com/media/6f908c9a2fbc889029028dd9cb5a91ba/href">https://medium.com/media/6f908c9a2fbc889029028dd9cb5a91ba/href</a>

An outlined rectangle with rect-outline

rect-outline(
    $color,
    $width,
    $height,
    $x,
    $y,
$outline: 1px,
    $fill: #ffffff
)

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.

Example:

rect-outline(orange, 100%, 20px, 0px, 0px, 2px, white)<a href="https://medium.com/media/92d941c89273a741a7df215c518a89bd/href">https://medium.com/media/92d941c89273a741a7df215c518a89bd/href</a>

Drawing a circle

circle(
    $color,
    $diameter,
    $x,
    $y
)

Example:

circle(deeppink, 60px, 0, 0)<a href="https://medium.com/media/1c0c302b92e7c767ca63fc35d9e4619a/href">https://medium.com/media/1c0c302b92e7c767ca63fc35d9e4619a/href</a>

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

circle-outline(
    $color,
    $diameter,
    $x,
    $y,
    $outline: 1px,
    $fill : #ffffff
)

Example:

circle-outline(darkblue, 60px, center, 20px, 4px)<a href="https://medium.com/media/c9c20ff4f477978b74a7369382b3f015/href">https://medium.com/media/c9c20ff4f477978b74a7369382b3f015/href</a>

Note: Here we use the three-dots at the end to destruct the list to an argslist in Sass.

Multiple lines interface

lines(
    $count: 3,
    $color: #fcfcfc,
    $width: 100%,
    $height: 10px,
    $gutter: 10px,
    $x: 0,
    $y: 0,
    $lastWidth: 100%,
    $outline: false,
    $outline-width: 1px,
    $outline-fill: #ffffff
)

Example:

lines(15, #D8D8D8, 100%, 12px, 7px, 0px, 0px);<a href="https://medium.com/media/4b39e56f758a32925cd35a4213e1cc63/href">https://medium.com/media/4b39e56f758a32925cd35a4213e1cc63/href</a>

Example when last line is not a full block:

lines(4, #444444, 100%, 12px, 7px, 0px, 0px, 70%)<a href="https://medium.com/media/000863eecb2437875ef26cbdb2a957f6/href">https://medium.com/media/000863eecb2437875ef26cbdb2a957f6/href</a>

Set outlines:

lines(3, #123456, 100%, 30px, 10px, center, 0px, 90%, true, 4px, #ffffff)<a href="https://medium.com/media/fb9f19bea31b0e053ef31b54cc3f5737/href">https://medium.com/media/fb9f19bea31b0e053ef31b54cc3f5737/href</a>

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

shape(
    $background,
    $background-size,
    $background-position
)

Example:

the red star is added by a custom shape: shape(url(‘https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg’), (40px 40px), (center 0))<a href="https://medium.com/media/3d0f3f029588d35cda437bd617f1e5d3/href">https://medium.com/media/3d0f3f029588d35cda437bd617f1e5d3/href</a>

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

To illustrate that you can go much fancier than just simple lines 🙂<a href="https://medium.com/media/b73e6bb225243d06c0e93b9f5aae8e31/href">https://medium.com/media/b73e6bb225243d06c0e93b9f5aae8e31/href</a><a href="https://medium.com/media/dd4c719906fb9334b657725a9159f502/href">https://medium.com/media/dd4c719906fb9334b657725a9159f502/href</a>

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

Draw Skeleton Backgrounds with Sass was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Draw Skeleton Backgrounds with Sass

Cool stuff, every week

More Articles