LoadingOverlay

A loading indicator that fills it's parent.

Theming#

The Loader component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy#

overlay
text

Default theme#

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { loadingOverlayAnatomy } from '@saas-ui/theme/anatomy'

const { defineMultiStyleConfig, definePartsStyle } =
  createMultiStyleConfigHelpers(loadingOverlayAnatomy.keys)

const baseStyle = definePartsStyle({
  overlay: {
    p: 4,
  },
  text: {},
})

const variantFill = definePartsStyle(() => {
  return {
    overlay: {
      flex: 1,
      height: '100%',
      bg: 'whiteAlpha.400',
      _dark: {
        bg: 'blackAlpha.400',
      },
    },
  }
})

const variantFullscreen = definePartsStyle(() => {
  return {
    overlay: {
      position: 'fixed',
      inset: 0,
      zIndex: 'modal',
      bg: 'white',
      _dark: {
        bg: 'gray.800',
      },
    },
  }
})

const variantOverlay = definePartsStyle(() => {
  return {
    overlay: {
      position: 'absolute',
      inset: 0,
      bg: 'whiteAlpha.300',
      _dark: {
        bg: 'blackAlpha.300',
      },
    },
  }
})

export const loadingOverlayTheme = defineMultiStyleConfig({
  defaultProps: {
    variant: 'fill',
  },
  baseStyle,
  variants: {
    fill: variantFill,
    fullscreen: variantFullscreen,
    overlay: variantOverlay,
  },
})

Customize the theme#

import { extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from '@saas-ui/theme'

const theme = extendTheme(
  {
    components: {
      SuiLoader: {
        baseStyle: {
          overlay: {
            bg: 'red.500',
          },
        },
        variants: {
          fill: {
            overlay: {
              bg: 'blue.500',
            },
          },
        },
      },
    },
  },
  baseTheme
)

Was this helpful?