Skeleton loader generator

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.