Loading Indicator

Implement loading indicators with keyboard and screen reader accessibility.

228|18|Updated Dec 7, 2024

Search Tags:#accessibility #ux #progress #user feedback #ui patterns #loading indicator

Ready to run

npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill loading-indicator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Loading Indicator
Source: https://github.com/thedaviddias/ux-patterns-for-developers/tree/main/skills/loading-indicator
Command: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill loading-indicator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear visual feedback to users, indicating that content is being loaded or a process is underway, thereby managing user expectations and reducing perceived wait times.

Core Features & Use Cases

Visual Feedback: Implements spinners or progress indicators to show ongoing operations.
State Management: Helps manage user perception during asynchronous tasks like data fetching or form submissions.
Use Case: When a user submits a form, this Skill can display a loading indicator on the submit button to show the request is being processed, preventing duplicate submissions and informing the user.

Quick Start

Use the loading indicator skill to show a busy state for the button labeled 'Save'.

Frequently Asked Questions about Loading Indicator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I show a loading indicator on a submit button to prevent duplicate form submissions?▼

You can implement a loading indicator on a submit button to show that an asynchronous request is processing, which provides clear visual feedback and prevents duplicate form submissions.

What is the best way to display visual feedback for background tasks with unknown durations?▼

Displaying visual feedback for background tasks with unknown durations is best handled with spinners or progress indicators, ensuring accessibility through keyboard and screen reader support while managing user perception.

Does this loading indicator pattern support screen reader and keyboard accessibility?▼

Yes, this loading indicator pattern ensures accessibility through dedicated screen reader and keyboard support, allowing users with assistive technologies to perceive ongoing content loading or process execution states accurately.

When do I need to use a loading indicator for data fetching in UI patterns?▼

You need a loading indicator for data fetching when managing user perception during asynchronous tasks, reducing perceived wait times by showing spinners or progress indicators while content is actively being retrieved.

Can I use this approach for both button submissions and general data fetching states?▼

Yes, this approach works for both button submissions and general data fetching, implementing visual feedback patterns that cover asynchronous form processing, background tasks, and ongoing content loading scenarios.