--- title: "Skeleton loader UI: anatomy, variants and examples | Kombai" description: "A skeleton loader shows gray shapes in the layout of the coming content, so the page looks ready while the data loads." canonical_url: https://kombai.com/glossary/skeleton-loader/ author: "The Kombai Team" --- # Skeleton loader A skeleton loader shows gray shapes in the layout of the coming content, so the page looks ready while the data loads. - Also called: skeleton screen, skeleton - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/skeleton-loader/), [35 mobile designs](https://kombai.com/gallery/mobile/skeleton-loader/) - [Fablewood](https://kombai.com/gallery/inspirations/skeleton-loader-ios-21/) (Mobile) - [Emberlyn](https://kombai.com/gallery/inspirations/skeleton-loader-web-42/) (Web) - [Portico](https://kombai.com/gallery/inspirations/skeleton-loader-ios-26/) (Mobile) ## What is a skeleton loader? A skeleton loader is a stand-in for content that is still loading. Gray bars, circles and blocks sit exactly where the text, avatars and images will go, often with a slow shimmer, and real content replaces each shape as it arrives. The page keeps its layout the whole time, so nothing jumps. - Shapes follow the final layout: circles for avatars, blocks for images, bars for lines of text. - Headings, tabs and controls stay real. Only the data is a placeholder. ## When to use skeleton loader - **A known layout.** Feeds, lists, tables and grids whose shape you can draw before the data comes. - **First load of a screen.** Opening a page or a tab where every item loads at once. - **Content arriving in parts.** Sections that fill in one by one as each request returns. ## When not to use one - **Actions and short waits.** Saving or sending needs a spinner on the button, not a fake page. - **Unknown layouts.** If you can't predict the shape, a skeleton will be wrong. Use a spinner. - **Failed requests.** Don't leave shapes on screen. Replace them with an error and a retry. ## Anatomy 1. **Avatar**: A circle where a photo goes 2. **Text bars**: Close to real line lengths 3. **Media block**: Holds the image's space 4. **Shimmer**: Optional, shows it is working 5. **States**: Loading, partial, loaded, still ## Variants We sorted every skeleton loader design in the Kombai gallery and found six patterns. ### 1. List rows The default. A circle or square beside two bars, repeated down the screen for creators, search results and inboxes. - [Halverd](https://kombai.com/gallery/inspirations/skeleton-loader-ios-14/) (Mobile) - [Copperline](https://kombai.com/gallery/inspirations/skeleton-loader-ios-10/) (Mobile) - [Peregrin](https://kombai.com/gallery/inspirations/skeleton-loader-web-8/) (Web) ### 2. Card grids Image blocks with short bars under each one, laid out in the same grid the stickers, recordings or stays will fill. - [Pellwick](https://kombai.com/gallery/inspirations/skeleton-loader-web-46/) (Web) - [Foxglade](https://kombai.com/gallery/inspirations/skeleton-loader-web-15/) (Web) - [Sablewick](https://kombai.com/gallery/inspirations/skeleton-loader-ios-34/) (Mobile) ### 3. Tables and dashboards Real column headers and filters above gray cells, stat blocks and faded charts. - [Thornfield](https://kombai.com/gallery/inspirations/skeleton-loader-web-20/) (Web) - [Tidewell](https://kombai.com/gallery/inspirations/skeleton-loader-web-14/) (Web) - [Tessaly](https://kombai.com/gallery/inspirations/skeleton-loader-ios-20/) (Mobile) ### 4. Text lines Stacks of bars of uneven length for documents, policies and briefs, so the block reads as a paragraph. - [Bellamy](https://kombai.com/gallery/inspirations/skeleton-loader-web-21/) (Web) - [Alderbrook](https://kombai.com/gallery/inspirations/skeleton-loader-ios-30/) (Mobile) - [Vantris](https://kombai.com/gallery/inspirations/skeleton-loader-web-37/) (Web) ### 5. AI drafts An assistant writing a brief, a listing or a set of ideas shows bars and cards where its output will land. - [Silverbrook](https://kombai.com/gallery/inspirations/skeleton-loader-web-34/) (Web) - [Brindlemark](https://kombai.com/gallery/inspirations/skeleton-loader-ios-25/) (Mobile) - [Lanternrow](https://kombai.com/gallery/inspirations/skeleton-loader-web-27/) (Web) ### 6. Partial skeletons Most of the screen is real and one panel, card or set of prices is still a placeholder. - [Sedgemont](https://kombai.com/gallery/inspirations/skeleton-loader-web-49/) (Web) - [Fernwake](https://kombai.com/gallery/inspirations/skeleton-loader-ios-6/) (Mobile) - [Bellwether](https://kombai.com/gallery/inspirations/skeleton-loader-web-19/) (Web) ## Where skeleton loaders show up ### Search results The query and filters stay put while result rows or tiles load below them. - [Thornfield](https://kombai.com/gallery/inspirations/skeleton-loader-ios-12/) (Mobile) - [Caldera Nine](https://kombai.com/gallery/inspirations/skeleton-loader-ios-8/) (Mobile) - [Yarrowfield](https://kombai.com/gallery/inspirations/skeleton-loader-web-41/) (Web) ### Feeds and profiles Posts, guides and profile grids drawn as shapes, so scrolling starts before the data is in. - [Westbrook](https://kombai.com/gallery/inspirations/skeleton-loader-web-53/) (Web) - [Discover](https://kombai.com/gallery/inspirations/skeleton-loader-ios-16/) (Mobile) - [Tallow](https://kombai.com/gallery/inspirations/skeleton-loader-ios-23/) (Mobile) ### Travel and stays Flight, bundle and stay cards hold their places under a real route or search bar. - [Wrenley Air](https://kombai.com/gallery/inspirations/skeleton-loader-ios-31/) (Mobile) - [Rooksbury](https://kombai.com/gallery/inspirations/skeleton-loader-web-33/) (Web) - [Nimbus Reef](https://kombai.com/gallery/inspirations/skeleton-loader-ios-22/) (Mobile) ### Checkout and balances Payment fields, totals and balances load as shapes, so the form doesn't jump when the numbers arrive. - [Larkspur Pro](https://kombai.com/gallery/inspirations/skeleton-loader-web-17/) (Web) - [Umbermoor](https://kombai.com/gallery/inspirations/skeleton-loader-web-36/) (Web) - [Quillon](https://kombai.com/gallery/inspirations/skeleton-loader-ios-3/) (Mobile) ## Skeleton loader vs similar components | | [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) | [Loading indicator](https://kombai.com/glossary/loading-indicator/) | [Empty state](https://kombai.com/glossary/empty-state/) | |---|---|---|---| | Shows | The shape of coming content | That work is happening | That nothing is there | | Layout | Matches the final page | Usually none | A message and an action | | Best for | Feeds, lists and cards | Actions and unknown waits | Loaded screens with no data | ## Build notes - Size each shape to the content it replaces, so nothing jumps when data lands (Cumulative Layout Shift). - Hide the shapes from screen readers with aria-hidden, and say "Loading" in a role="status" region. - Set aria-busy="true" on the container until its content is in. - Swap in real content as each part arrives instead of waiting for everything. - Keep headings, tabs and filters real. Only the data should be a placeholder. - Under prefers-reduced-motion, drop the shimmer and keep the shapes still. ## FAQ ### Skeleton loader or spinner? Use a skeleton when you know the layout that's coming, like a feed, a table or a product grid. Use a spinner for actions like saving, and for areas whose shape you can't predict. ### Should a skeleton shimmer? It's optional. A slow shimmer or pulse shows the page is still working, but keep it low contrast, and turn it off for people who have reduced motion set. ### What happens if loading fails? Replace the skeleton with an error message and a retry. Gray shapes that never fill in look like a frozen page. ### Are skeleton screens accessible? They can be. The shapes mean nothing to a screen reader, so hide them, mark the container aria-busy and put a short text status like 'Loading results' in a live region. ## Related terms - [Loading indicator](https://kombai.com/glossary/loading-indicator/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Empty state](https://kombai.com/glossary/empty-state/) - [Card](https://kombai.com/glossary/card/) ## References - [Apple Human Interface Guidelines: Loading](https://developer.apple.com/design/human-interface-guidelines/loading) - [web.dev: Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) - [MDN: aria-busy](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy) - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)