How to make Skeleton Loader with html and css

so, before we make a skeleton loader, we need to find out first what is a skeleton loader

In the simplest terms, Skeleton loader is a static / animated placeholder for the information that is still loading. it mimic the structure and look of the entire view

it give an idea regarding what kind of content is loading in each block like image, text, long text, etc.

these visual placeholders were seen in light grey or neutral color boxes that appears in the area where content has not been loaded yet.

ok, for our practice example, i have prepared a simple card design that i made myself

first, we prepared one file html and one file css with the name styles.css, then add the code below into your html file.

then, copy paste the css code below into your css file

now it's time to add animation so that the background can move, please replace the .skeleton-loader code in css with the code below

well, now the background can move

now, it's time to for us to make the design card cooler when the content is successfully loaded

please add the css code below into your css file

here are all the content of the css file

because here in our case it is a skeleton loader and it is used when the application is requesting content to backend / API, so we will make it look as if our application is loading content from the backend / API.

please create a javascript file with the name script.js then copy the code below

and taraaaaa, now open your html file in your browser and see the results

if you still confused, please see the full source code in the link below