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?