Animated element that communicates progress without telling how long the process will take
import { Loader } from "@uicapsule/components";
import type { LoaderProps } from "@uicapsule/components";
Supports inheriting its color from the parent element
Supports responsive size values


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 />


  • small Loader size is the default size and is used with small-sized components like Button.
  • medium Loader size is to be used for larger components or page sections.
<View gap={3} direction="row">
<Loader size="small" />
<Loader size="medium" />

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.

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


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' }} />