PolarisLoading
The loading component is used to indicate to merchants that a page is loading or an upload is processing.
Use to indicate that the page is loading.
import {Frame, Loading} from '@shopify/polaris';
import React from 'react';
function LoadingExample() {
return (
<div style={{height: '100px'}}>
<Frame>
<Loading />
</Frame>
</div>
);
}Props
Want to help make this feature better? Please share your feedback.
interface LoadingProps
Required components
The loading component must be wrapped in the frame component.
Best practices
The loading component should:
- Indicate that the page requested is loading.
- Indicate that an upload has started and the action will soon complete.
- Be used to give feedback for an entire page load or a page mutation like saving a product.
- Be used alongside a component or page element that contains
aria-busyto represent what is loading.
Related components
- To indicate that an action has been received, use the Spinner
- To improve user experience and reduce the appearance of long loading times, use the Progress bar component.
- To better represent loading content, use Skeleton page along with Skeleton body text and Skeleton display text components.
Accessibility
The loading component is implemented using the ARIA 1.1 progressbar pattern. It outputs an ARIA role="progressbar" and uses aria-valuemin, aria-value-max, and aria-valuenow to convey the loaded percentage to screen reader users.