use-design-system/Loader

To add an accessible loading indicator, you need a component that renders a spinner with proper ARIA attributes. This loader automatically applies role="status" and manages aria-label so screen readers can announce loading states clearly to users.

A UI spinner component can be customized with small, medium, and large sizes, alongside primary, dark, and light color themes. These options allow you to match the loading indicator to your specific interface context, whether inline or full-screen.

Yes, you can use a loading indicator inline within form fields and buttons to show processing states. The component also supports full-screen usage to cover the entire interface during heavy operations, ensuring flexible integration across your application.

This loading indicator supports screen reader labels for status indication by utilizing optional descriptive text. It automatically manages aria-label attributes alongside role="status" to ensure assistive technologies properly communicate the current loading process.

The best way to display a full-screen loading state during heavy operations is using a loader component that supports full-screen coverage. This visually blocks interaction while providing customizable sizes, colors, and screen reader support for accessibility.