Skip to content
GitLab

Add a "skeletons" component

Merged Administrator requested to merge github/fork/jaumesala/v5-skeletons-component into main

Created by: jaumesala

Introduction

Nowadays, webapps use different techniques to improve the UX of the user when some data needs to be loaded. One of those trending techniques is the use of css "skeletons". No matter what javascript tool we use, we should facilitate and encourage developers to use them. Now that the framework is evolving and other components like the spinnerhas been added. I've thought on give a shot and explore the skeletons option.

skeleton example

How it works

Skeletons are composed of .skeleton-lines. Each of them needs one or more .skeleton-dashes.

<span class="skeleton-line">
  <span class="skeleton-dash"></span>
</span>

By default all .skeleton-dashes together will take the full with of the .skeleton-line. Still, you can customize them with custom css widths or even using the utility classes.

Screenshot 2020-10-09 at 18 07 52Screenshot 2020-10-09 at 18 08 03

The way it works is using a hidden empty space to preserve the size of the parent HTML element. This way we can mimic the original element proportion.

Screenshot 2020-10-09 at 18 08 11

For more information on how it works, check the documentation.

Waiting for feedback.

Fixes #31665 (closed)

Preview: https://deploy-preview-31859--twbs-bootstrap.netlify.app/docs/5.0/components/placeholders/

TODO:

  • fix the empty heading errors properly
  • a11y
  • scss vars in docs like the other components?
  • fix examples
  • use a range in the colors docs?
  • maybe add a button to toggle animation?