LoadingOverlay

Animated spinner for loading states.

import { LoadingOverlay } from '@creation-ui/react'
;<LoadingOverlay />

Showing the overlay

export const LoadingOverlayExample = (props: LoadingOverlayProps) => {
  const [loading, setLoading] = useState(true)
 
  const start = () => setLoading(true)
  const end = () => setLoading(false)
  const handleClick = loading ? end : start
 
  return (
    <Container variant='column'>
      <div
        className='
      relative
      overflow-clip
      bg-blue-200 h-36 w-36 rounded-lg'
      >
        <LoadingOverlay active={loading} {...props} />
      </div>
 
      <Button onClick={handleClick}>{loading ? 'Stop' : 'Start'} loading</Button>
    </Container>
  )
}

Limitations

To keep LoadingOverlay within the parent container you need to make it relative and clip the overflow to take into account the rounded edges. In TailwindCSS it would be relative and overflow-clip

Component API

LoadingOverlay component props

Prop	Default	Description
`className`	—	`string \| string[]` Class names to add to wrapper component
`open`	`false`	`boolean` Is component visible
`size`	`md`	`sm \| md \| lg` Size of the element
`white`	—	`boolean` Use white loader? E.g. to contrast background color
`onClick`	—	`() => void` Callback function called on element click

Loader Progress Bar