Overview
The Loading component is designed to provide visual feedback to users during processes that take time, such as data fetching, form submissions, or any operation that requires waiting. It helps improve user experience by indicating that an action is in progress.
Variants
The Loading component can be customized with different variants to suit various design needs. The available variants include:
- Default: A simple loading indicator that can be used in most scenarios.
- Contained: A loading indicator that is contained within a specific area, often used in modals or sections of a page.
Size
The Loading component can also be adjusted in size to fit different contexts. Size can be set using the size prop, which accept number in pixel as the value. This allows for flexibility in how the loading indicator is displayed based on the surrounding content and design requirements.
API Reference
Loading
An animated loading indicator component for showing progress during asynchronous operations.
Props
| Name | Type | Default | Description |
|---|---|---|---|
size | number | 48 | The size of the loading indicator in pixels |
contained | boolean | false | Whether to show the loading indicator with a contained background |
Inherited Props
The Loading component accepts all standard HTML svg element props.
Notes
- The component renders as an SVG with animated path elements
- The animation uses CSS transforms and keyframe animations for smooth rotation
- The
containedvariant adds a background container for better visibility - Size is specified in pixels and affects both width and height equally