Loader

A loading indicator that fills it's parent.

The Loader component will try to fill up it's parent element and renders a Spinner in the center.

Import#

import { Loader } from '@saas-ui/react'

Usage#

Basic#

<Loader />

Variants#

Fill#

The default variant is fill, this will fill it's parent element with flex="1" and height="100%".

<Card title="Users">
<CardBody>
<Loader />
</CardBody>
</Card>

Overlay#

The overlay variant will position the loader absolute, on top of it's parent element. When using overlay be sure to add position="relative" to the parent element to position it correctly.

<Card height="100px" title="Users" position="relative">
<CardBody>
<Loader variant="overlay" />
</CardBody>
</Card>

Fullscreen#

The fullscreen variant will position the loader fixed, on top of your app.

function MyApp() {
const [isLoading, setLoading] = React.useState(false)
React.useEffect(() => {
if (isLoading) {
setTimeout(() => {
setLoading(false)
}, 2000)
}
}, [isLoading])
return (
<Box height="200px" pos="relative" p="4">
<Button onClick={() => setLoading(true)}>Show loader</Button>
<Loader variant="fullscreen" isLoading={isLoading} />
</Box>
)
}

Customize spinner#

<Loader size="lg" color="primary.500" thickness="4px" />

Custom spinner#

<Loader spinner={<SaasSpinner />} />

With text#

<Loader spinner={<SaasSpinner />}>Loading...</Loader>

Accessiblity#

Add a label describing the type of content being loaded to notify screen readers.

Props#

Support all Spinner options

isLoading

Description

Show or hide the loader.

Type
boolean

spacing

Description

Spacing between children

Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>

spinner

Description

Render a custom spinner

Type
ReactNode

variant

Type
"fill" | "overlay" | "fullscreen"
Default
"fill"

Was this helpful?