Loading Indicator
Last updated
What is Loading Indicator?
The loading indicator shows that an operation’s being performed and how long the process will take.
- Linear and non-linear Variants: Depending on the context and the component it’s used for, the loading indicator can be represented either with linear or with a non-linear (e.g. circular) variant.
- Determinate or indeterminate wait time: In some cases, the wait time can’t be determined. The loading indicator should be shown until the loading finishes or an error happens. In other cases, it’s better to indicate how much time’s left until the loading is done.
- Light Variant: The loading indicator should respect its parent element background and provide a variant to be used on darker background colours.
- Reduced Motion: The loading indicator should be synced with the system motion settings and reduce its animation speed when reduced motion settings are turned on.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Loading Indicator: common questions
Can I learn Loading Indicator in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Loading Indicator in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Loading Indicator tutorial for beginners?
It is lesson 95 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.