<Loader size="medium" />
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.
<Loader />
<View gap={3} direction="row"> <Loader size="small" /> <Loader size="medium" /> </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: 8, }} > <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' }} />