Skip to main content

⬅️  Go back

A simple sweeping animation for skeleton UI components with HTML and CSS

I’m not sure where the terminology originates, but “skeleton UI” has become a popular perceived performance technique and is a useful one to have in the ol’ toolbelt.

Depending on the context, this technique can be used to mock entire screens or individual components that may have to load asynchronously. They help communicate to folks that something is indeed happening when they first arrive, and also prevent jumping content and costly layout reflows.

Here is a simple example that uses a “sweeping” gradient animation over a generic “card” component to communicate movement and change.