EspañolSkeleton loading generator (CSS)
Choose the template and colors. The skeleton mimics the shape of the content that's coming, which makes the wait feel shorter than a spinning icon.
How to useA skeleton while the page loads
Available in: 
Skeleton loading generator (CSS): what it is for
A skeleton screen is the gray outline that appears in place of the content while it loads, like on Facebook and YouTube. It shows the shape of what's coming, makes the wait feel shorter and keeps the page from jumping when the content appears.
Choose the template (card with image, list with avatar, profile or paragraph), how many times to repeat it, the colors and the corners. The animated shimmer only moves the background and is turned off for people who asked for less motion, and the block uses aria-busy with loading text for screen readers.
How to use
- Choose the template and how many times to repeat it.
- Adjust the colors, corners and shimmer.
- Copy the code and swap it for the content when it arrives.
When to use it
- A product list loaded from an API.
- A feed or comment list.
- Dashboards and web apps.
Frequently asked questions
Why a skeleton and not a loading icon?
The skeleton shows the shape of what's going to appear, so the page doesn't jump when the content arrives and the wait feels shorter. It works best for cards, lists and profiles; for quick actions, like submitting a form, an indicator on the button itself is enough.
What about screen reader users?
The block gets aria-busy=true and hidden "Loading" text; the rectangles are decorative (aria-hidden). When the content arrives, swap the skeleton for the content and remove aria-busy.
Is the animated shimmer heavy?
No: the animation only moves the background of each rectangle. For people who set their system to reduce motion, the shimmer is turned off and only the color remains.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.