Loader

Indicate loading state with animated loading indicators.

Import


import { Loader } from '@tidbcloud/uikit'

Basic Usage


import { Loader } from '@tidbcloud/uikit'
 
function Demo() {
  return <Loader />
}

Loader Types

Loader supports 3 types: oval (default), bars, and dots.


import { Loader, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Loader type="oval" />
      <Loader type="bars" />
      <Loader type="dots" />
    </Group>
  )
}

Size and Color


import { Loader, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group>
      <Loader size="xs" />
      <Loader size="sm" />
      <Loader size="md" />
      <Loader size="lg" />
      <Loader size="xl" />
      <Loader size={50} color="blue" />
    </Group>
  )
}

Custom Children

Use children prop to render custom content instead of the loader.


import { Loader } from '@tidbcloud/uikit'
 
function Demo() {
  return <Loader>Loading...</Loader>
}

Key Props

Prop	Type	Description
`type`	`'oval' \| 'bars' \| 'dots'`	Loader animation type
`size`	`MantineSize \| number`	Controls width and height
`color`	`MantineColor`	Loader color from theme or CSS color
`children`	`ReactNode`	Custom content to replace default loader
`loaders`	`object`	Custom loader components