LoadingOverlay

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 { LoadingOverlay, LoadingSpinner, LoadingText } from '@saas-ui/react'

Usage

Basic

<LoadingOverlay>
<LoadingSpinner />
</LoadingOverlay>

Variants

Fill

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

import { Card, CardHeader, CardBody } from '@chakra-ui/react'
import { LoadingOverlay, LoadingSpinner } from '@saas-ui/react'
export default function Fill() {
return (
<Card>
<CardHeader>Users</CardHeader>
<CardBody>
<LoadingOverlay>
<LoadingSpinner />
</LoadingOverlay>
</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.

import { Card, CardHeader, CardBody } from '@chakra-ui/react'
import { LoadingOverlay, LoadingSpinner } from '@saas-ui/react'
export default function Fill() {
return (
<Card position="relative" height="100px">
<CardHeader>Users</CardHeader>
<CardBody>
<LoadingOverlay variant="overlay">
<LoadingSpinner />
</LoadingOverlay>
</CardBody>
</Card>
)
}

Fullscreen

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

import { Box, Button } from '@chakra-ui/react'
export default 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>
<LoadingOverlay variant="fullscreen" isLoading={isLoading}>
<LoadingSpinner />
</LoadingOverlay>
</Box>
)
}

Customize spinner

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

Custom spinner

<LoadingOverlay>
<SaasSpinner />
</LoadingOverlay>

With text

<LoadingOverlay>
<SaasSpinner />
<LoadingText>Loading...</LoadingText>
</LoadingOverlay>

Accessiblity

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

Was this helpful?