Show or hide the loader.
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
isLoading
Description
Type
boolean
spacing
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
spinner
Description
Render a custom spinner
Type
ReactNode
variant
variant
Type
"fill" | "overlay" | "fullscreen"
Default
"fill"
Was this helpful?