skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-spinner

Guide lg-spinner usage for accessible loading indicators in Angular projects.

23|46|Updated Sep 7, 2020
Search Tags:#accessibility#angular#best-practices#spinner#ui-component#loading-indicator#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spinner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-spinner
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/spinner
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spinner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear guidance on implementing Canopy's lg-spinner consistently and accessibly across Angular projects, reducing misusage and UI inconsistency.

Core Features & Use Cases

  • Guidance for using the lg-spinner in various contexts, including page-level and button states.
  • Accessibility best practices, such as pairing spinners with screen reader messaging.
  • Do's and Don'ts and practical usage scenarios to avoid common mistakes.

Quick Start

Integrate the Canopy Spinner best practices into your Angular project by following the examples in this guide.

Frequently Asked Questions about canopy-spinner

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

FAQPage Schema
How do I implement an accessible loading spinner in Angular?▼

Accessible loading spinner implementation in Angular requires pairing the visual indicator with screen-reader messaging to announce loading states clearly to assistive technologies. This ensures users understand when content is still loading.

What are the best practices for using a spinner in a loading button?▼

Spinner usage in loading buttons requires consistent variant selection and adherence to Do and Don't guidance to avoid misuse. This prevents visual inconsistency and ensures the loading state is properly communicated to the user.

When should I use a page-level spinner versus a card-level spinner?▼

Page-level spinner usage applies to full-page loading states, while card-level spinner usage targets specific content areas. Consistent variant usage across these contexts prevents UI inconsistency and improves overall user experience.

Why does my Angular loading indicator fail screen reader accessibility checks?▼

Loading indicator accessibility checks fail when spinners lack paired screen-reader messaging. Applying best practices for screen-reader messaging ensures the loading state is properly announced to assistive technology users.

What should I avoid when implementing a UI loading indicator in Angular?▼

Avoiding UI loading indicator misuse involves following Do and Don't guidance to prevent inconsistent variant usage and missing accessibility messaging. This maintains visual consistency and proper assistive technology support.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-pipes-kebab-case

Transform strings to kebab-case in Angular templates with Canopy's LgKebabCasePipe.

Official
Basic
YavlProYavlPro
1

web-design-guidelines

Audit UI codebases against Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-forms-filter-buttons

Document Canopy filter button patterns for Angular single and multi-select controls.

Official
Intermediate
Jorge-IvanJorge-Ivan
1

design-audit

Audit project designs for visual consistency, WCAG compliance, and design system adherence.

Community
Advanced