What's a Skeleton loader?
It's an animated placeholder for a piece of content that's still loading
Skeleton Loaders made easier.
You'll find the generator hosted here https://skeleton-loader.web.app
Once opened you'll see
The left column
You'll see the canvas area where you can control your skeleton and do the following
- Modify the skeleton "width/height, background, foreground".
- Enable/Disable the animation.
- Control the animation duration.
- Add/Edit shapes of the skeleton "width/height, position and color"
The right column
You'll see the preview of your skeleton and below it the important part which is the generated CSS code
What makes this generator significant?
Simply it generates the skeleton in a single <div> which makes it so easy to add it into any webapp.
The idea
Is that it uses the CSS multiple backgrounds feature to generate it in a single element.
You can check browser compatibility for the generated CSS code from here
https://caniuse.com/?search=multiple%20background
Finally
If you're curious to see the code or open a discussion about it or report an issue, the code is hosted on this Github repo.
Top comments (0)