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 spinner
has been added. I've thought on give a shot and explore the skeletons
option.
How it works
Skeletons are composed of .skeleton-line
s. Each of them needs one or more .skeleton-dash
es.
<span class="skeleton-line">
<span class="skeleton-dash"></span>
</span>
By default all .skeleton-dash
es 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.
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.
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?