Loader

<Loader size="medium" />

Loader is usually used as part of other components to enable loading state for them but can still be used as a standalone element.

<Loader />

<View gap={3} direction="row">
  <Loader size="small" />
  <Loader size="medium" />
</View>

Loader supports responsive syntax for its size property, which means you can change its width based on the viewport.

<Loader size={{ s: "small", m: "medium" }} />

Loader is coming in primary color but can also inherit its color from the parent element text color.

<div
  style={{
    background: "var(--uic-color-black)",
    color: "var(--uic-color-white)",
    padding: 8,
  }}
>
  <Loader color="inherit" />
</div>

If you need to announce the spinner action to the screen reader users, you can use aria-label attribute. It will also add aria-live attribute to the Loader to make sure that status changes are announced.

<Loader attributes={{ 'aria-label': 'Loading results' }} />