--- title: "Loading indicator UI: variants and examples | Kombai" description: "A loading indicator is a spinner, bar or animation that shows people the app is working on their request." canonical_url: https://kombai.com/glossary/loading-indicator/ author: "The Kombai Team" --- # Loading indicator A loading indicator is a spinner, bar or animation that shows people the app is working on their request. - Also called: spinner, loader - Platforms: Web, Mobile - In the Kombai gallery: [34 web designs](https://kombai.com/gallery/web/loading/), [34 mobile designs](https://kombai.com/gallery/mobile/loading/) - [Nibbly](https://kombai.com/gallery/inspirations/loading-ios-4/) (Mobile) - [Thrum](https://kombai.com/gallery/inspirations/loading-web-5/) (Web) - [Pollara](https://kombai.com/gallery/inspirations/loading-web-2/) (Web) ## What is a loading indicator? A loading indicator tells people that something is on its way: a page, a result, a payment confirmation. It keeps moving the whole time, sits where the content will appear and, on longer waits, says what is happening. When the amount of work is known, it becomes a progress bar. - Spinners and dots are for waits of unknown length. Bars and percentages are for work that can be measured. - A short line of text, like "Confirming your payment", says what the wait is for. ## When to use loading indicator - **Waiting on a request.** Fetching results, confirming a payment or joining a call. - **Background work.** Uploads, exports and syncs that run while people keep going. - **AI responses.** An assistant thinking or writing before the answer appears. ## When not to use one - **Known page layouts.** For feeds and lists, a skeleton shows the shape of what is coming. - **Instant actions.** If the response is near instant, a flashing spinner only adds noise. - **Measurable work.** If you know how much is done, show a progress bar with a percent. ## Anatomy 1. **Spinner**: Shows work is happening 2. **Label**: Says what is loading 3. **Region**: The area marked busy 4. **Cancel**: A way out of long waits 5. **States**: Loading, slow, done, focus ## Variants We sorted every loading design in the Kombai gallery and found six patterns. ### 1. Spinners and dots The default. A spinning arc, a ring or three pulsing dots for a wait of unknown length, often with one line of copy. - [Bramblewick](https://kombai.com/gallery/inspirations/loading-ios-33/) (Mobile) - [Ondine](https://kombai.com/gallery/inspirations/loading-ios-34/) (Mobile) - [Vitalia](https://kombai.com/gallery/inspirations/loading-ios-2/) (Mobile) ### 2. Loading screens with a status line A whole screen holds while the app boots or hands off, with a greeting and a line on what it is fetching. - [Kilnwright](https://kombai.com/gallery/inspirations/loading-web-33/) (Web) - [Kalo](https://kombai.com/gallery/inspirations/loading-ios-19/) (Mobile) - [Larkspur](https://kombai.com/gallery/inspirations/loading-web-11/) (Web) ### 3. Step lists Long jobs broken into named steps that tick off one by one, so people can see the work moving. - [Duskwater](https://kombai.com/gallery/inspirations/loading-web-29/) (Web) - [Hearthline](https://kombai.com/gallery/inspirations/loading-ios-7/) (Mobile) - [Nettlebrook](https://kombai.com/gallery/inspirations/loading-web-25/) (Web) ### 4. Thinking and typing indicators Dots, a shimmer or a timer in a chat thread while an assistant reads, reasons or writes its reply. - [Trellick](https://kombai.com/gallery/inspirations/loading-ios-25/) (Mobile) - [Lumeo](https://kombai.com/gallery/inspirations/loading-web-19/) (Web) - [Andaman](https://kombai.com/gallery/inspirations/loading-ios-28/) (Mobile) ### 5. Waits that block the flow A sheet or modal that holds the screen while a transfer sends or a match is found, because acting early would cause trouble. - [Orrery](https://kombai.com/gallery/inspirations/loading-ios-12/) (Mobile) - [Loomcraft](https://kombai.com/gallery/inspirations/loading-web-16/) (Web) - [Onward](https://kombai.com/gallery/inspirations/loading-ios-3/) (Mobile) ### 6. Inline loaders in a working screen A small spinner or bar inside one node, panel or map while the rest of the screen stays usable. - [Glasshouse](https://kombai.com/gallery/inspirations/loading-web-32/) (Web) - [Petrichor](https://kombai.com/gallery/inspirations/loading-ios-29/) (Mobile) - [Fieldnote](https://kombai.com/gallery/inspirations/loading-web-9/) (Web) ## Where loading indicators show up ### Payments and sign-in checks A short hold while a payment, a card activation or a sign-in code is confirmed, often with "keep this screen open". - [Norvela](https://kombai.com/gallery/inspirations/loading-ios-8/) (Mobile) - [Quill](https://kombai.com/gallery/inspirations/loading-ios-11/) (Mobile) - [Marlowe](https://kombai.com/gallery/inspirations/loading-ios-21/) (Mobile) ### AI generation Images, screens and plans being made, with a status line or a partial preview while the model works. - [Wrenfield](https://kombai.com/gallery/inspirations/loading-web-28/) (Web) - [Fernwell](https://kombai.com/gallery/inspirations/loading-web-20/) (Web) - [Verdant](https://kombai.com/gallery/inspirations/loading-ios-17/) (Mobile) ### Uploads and exports Files going up or a video rendering, with a bar or percent and a note to keep the tab open. - [Clipra](https://kombai.com/gallery/inspirations/loading-web-4/) (Web) - [Driftmark](https://kombai.com/gallery/inspirations/loading-web-30/) (Web) - [Loamly](https://kombai.com/gallery/inspirations/loading-ios-31/) (Mobile) ### Setup and onboarding A sandbox, a shop preview or a brand profile built in the background right after sign-up. - [Sandbench](https://kombai.com/gallery/inspirations/loading-web-3/) (Web) - [Kilnwork](https://kombai.com/gallery/inspirations/loading-web-13/) (Web) - [Sablefin](https://kombai.com/gallery/inspirations/loading-web-23/) (Web) ## Loading indicator vs similar components | | [Loading indicator](https://kombai.com/glossary/loading-indicator/) | [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) | [Progress indicator](https://kombai.com/glossary/progress-indicator/) | [Splash screen](https://kombai.com/glossary/splash-screen/) | |---|---|---|---|---| | Shows | That work is happening | The shape of coming content | How much is done | The brand while the app opens | | Knows how long | No | No | Yes, a percent or a step | No | | Best for | Actions and short waits | Lists, feeds and cards | Uploads, exports and setup | Cold app launch | ## Build notes - Name what is happening, like "Confirming your payment". Apple calls a bare "Loading" too vague. - Put that label in a role="status" region, and set aria-busy="true" on the area that is loading. - When the work can be measured, use a native or role="progressbar" with aria-valuenow. - Show a spinner only once the wait is noticeable, so quick responses don't flash one. - Offer Cancel on long waits when stopping is safe, and say so when a wait runs long. - Keep it moving, since a still loader looks frozen. Under prefers-reduced-motion, slow it down. ## FAQ ### Spinner or progress bar? Use a progress bar when you can measure the work, like a file upload, and a spinner when you can't. Apple's guidelines prefer a determinate bar where possible, because it helps people decide whether to wait, come back later or cancel. ### Spinner or skeleton screen? A skeleton fits when you know the layout that's coming, like a feed or a list, because it shows the shape of the page before the data arrives. A spinner fits actions and small areas where there is no layout to preview. ### How do screen readers know something is loading? They can't see the animation. Put a text label in a status region, like 'Loading your orders', set aria-busy on the area being updated and change the status when the content arrives. ### Should a loading indicator block the screen? Only when acting early would cause trouble, like leaving while a payment confirms. Otherwise keep the rest of the screen usable and show the loader where the new content will appear. ## Related terms - [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Splash screen](https://kombai.com/glossary/splash-screen/) - [Toast notification](https://kombai.com/glossary/toast-notification/) ## References - [Apple Human Interface Guidelines: Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators) - [MDN: ARIA progressbar role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role) - [MDN: aria-busy](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy) - [WCAG 2.2: Understanding status messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)