Loader

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

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

Loader comes in primary color but can also inherit its color from the parent element's text color.

<div
  style={{
    background: "var(--rs-color-black)",
    color: "var(--rs-color-white)",
    padding: "var(--rs-unit-x4)",
    borderRadius: "var(--rs-radius-small)",
    display: "inline-block",
    verticalAlign: "top",
  }}
>
  <Loader color="inherit" />
</div>

Loader supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

For example, this Loader is rendered in small size on small and medium screens and medium size on large and extra-large screens.

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

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

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