Skeleton Screen Generator

Skeleton Screen Generator is built for front-end developers. Paste page HTML (or upload an HTML file), and the tool renders it in an isolated preview, measures the real layout, and outputs ready-to-use skeleton loading placeholder code. Add a loading skeleton to your page without hand-writing any skeleton markup or styles, reducing blank-screen waits and layout shifts when data arrives.

Key Features

• Two output modes: the Adaptive skeleton keeps the original DOM, Flex, Grid, and media queries so text rewraps with the container — ideal for responsive pages. Snapshot extracts the visible blocks at the current viewport size into a fixed-ratio layout for fixed-size placeholders.
• Privacy-first mode: by default, only pure bars measured from real line widths are output, with no original text retained and description/keyword meta removed. Switch to "Exact layout" to keep invisible original text for more accurate wrapping.
• Element skeletonization: images, buttons, inputs, videos, solid blocks, and background-image elements are automatically turned into skeleton surfaces.
• Rich appearance settings: pick skeleton and page colors, choose shimmer, pulse, or no animation, and set radius to follow the original, use a unified size (0–24px), or none.
• Ignore selectors: exclude elements such as ads or floating buttons with comma-separated CSS selectors; the preview refreshes automatically about half a second after you stop typing.
• Multi-device preview: phone, tablet, and desktop presets plus custom sizes (280–1920px wide), with the original page and skeleton shown side by side.
• Three code outputs: complete adaptive code, shared CSS reusable across pages, and snapshot code — copy with one click or download as HTML.
• Built-in examples: article, card list, and product examples to get started quickly.

Use Cases

• Add loading skeletons to content, list, and detail pages for a better first-screen experience.
• Reproduce an existing page layout quickly instead of writing skeletons by hand.
• Generate lightweight fixed-ratio placeholders for a specific viewport.
• Demonstrate loading states during design reviews.

How to Use

1. Paste your page HTML (preferably including its key CSS) or click "Upload HTML" to pick a file.
2. Click "Generate skeleton" and compare the original preview with the skeleton preview.
3. Open "Generation settings" to adjust device size, colors, text handling, animation, radius, and ignore selectors; changes regenerate automatically.
4. Switch between Adaptive code, Shared styles, and Snapshot, then copy or download what you need.

What Is a Skeleton Screen

A skeleton screen is a gray placeholder interface shown while page data loads, with blocks and bars placed according to the real content layout. Compared with spinners, it tells users where content will appear and what shape it will take, so the transition to loaded content feels smoother and layout shifts are avoided.

FAQ

Q: Is this tool free?

A: Yes, with no registration required. Parsing and generation happen locally in your browser; your page source is never sent to a server.

Q: Does the generated skeleton keep my page text?

A: The default "Privacy first" mode keeps no original text and outputs only measured bars. For more accurate wrapping, switch to "Exact layout", which keeps the text invisible.

Q: Why should I paste the CSS together with the HTML?

A: The tool measures the actual layout to get sizes. Including key styles makes the skeleton positions and dimensions much more accurate.

Q: Should I choose Adaptive or Snapshot?

A: Choose Adaptive when embedding into responsive pages so the skeleton rewraps at any width; choose Snapshot when you only need a fixed-ratio first-screen placeholder.

Q: Can I exclude certain elements from the skeleton?

A: Yes. Enter CSS selectors in "Selectors to ignore" (separated by commas); matched elements and their descendants are removed from the output.