CSS Skeletons and shimmer effect
Hello everyone, I bring you a small example of how to implement skeletons in your web projects, for this example we will use angular you can use the framework or library you want, I leave an example project in stackblitz and some gists with css code.
CSS Code
To create the boxes we will use a div with the class .skeleton, to shape the boxes, you must use the height and width properties (for the width it is recommended to use percentages to make the divs respond), just be creative and you will achieve the desired shapes
The above example will create the following structure.
Shimmer effect
The styles are in charge of the .skeleton class, to remove the shimmer effect you can delete the .skeleton :: after selector.
It is advisable to use the shimmer effect since it gives a good feedback to the user indicating that the site is working and loading the necessary data.
Stackblitz project example
Here you will find a better example of how to implement skeletons in angular, this example can also be used in any similar framework or library
