Loading

    The loading component is used to indicate to merchants that a page is loading or an upload is processing.

    Examples

    Down Arrow

    Use to indicate that the page is loading.


    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-busy to represent what is loading.


    Accessibility

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    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.