Figma component
Show the component in Figma
Healthy
Show details
Overview
Key Features
- Size variants: Available in multiple sizes for different use cases.
- Color options: Available in primary and white.
- Accessibility: Includes ARIA attributes for screen reader compatibility.
Anatomy
- Outer Ring: Static circular base that provides structure and visual contrast.
- Cut-Out Segment: Rotating or animated arc that indicates loading activity or progress.
Look and Feel
Themes
Sizes
Different sizes are available depending on usage:
- xs
- sm
- md
- lg
- xl
Motion states
The loader moves through the four states, defining its animation cycle.
Best Practice
Do
Use a loader to indicate ongoing processes where users need to wait for a response.
Don't
Don’t use loaders for instant actions—if a process is too fast to notice, a loader may cause unnecessary flickering.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.