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?