Geist UI

Loading

Indicate an action running in the background.

General

Code Editor

<Loading />

<Loading />

with text

Customize text next to icon.

Code Editor

<Loading>Loading</Loading>

<Loading>Loading</Loading>

types

Loading indicators in different states.

Code Editor

<Grid.Container gap={2.5}>
  <Grid xs={24}>
    <Loading type="success" />
  </Grid>
  <Grid xs={24}>
    <Loading type="secondary" />
  </Grid>
  <Grid xs={24}>
    <Loading type="warning" />
  </Grid>
   <Grid xs={24}>
    <Loading type="error" />
  </Grid>
</Grid.Container>

<Grid.Container gap={2.5}>
  <Grid xs={24}>
    <Loading type="success" />
  </Grid>
  <Grid xs={24}>
    <Loading type="secondary" />
  </Grid>
  <Grid xs={24}>
    <Loading type="warning" />
  </Grid>
   <Grid xs={24}>
    <Loading type="error" />
  </Grid>
</Grid.Container>

spaces

Customize the space between points. (the ratio is relative to the current size)

Code Editor

<Grid.Container gap={2.5}>
  <Grid xs={24}>
    <Loading spaceRatio={2.5} />
  </Grid>
  <Grid xs={24}>
    <Loading spaceRatio={0.5} />
  </Grid>
</Grid.Container>

<Grid.Container gap={2.5}>
  <Grid xs={24}>
    <Loading spaceRatio={2.5} />
  </Grid>
  <Grid xs={24}>
    <Loading spaceRatio={0.5} />
  </Grid>
</Grid.Container>

APIs

`Loading.Props`

Attribute	Description	Type	Accepted values	Default
type	bg-color type	`LoadingTypes`	LoadingTypes	`default`
color	custom bg color	`string`	-	-
spaceRatio	percentage of space between points	`number`	-	1
...	native props	`HTMLAttributes`	`'id', 'title', 'className', ...`	-

`LoadingTypes`

type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'

Contributors

Geist is an open source project from the community.