Documentation

Guide

Getting Started

NextUI + Next.jsUpdated

Theme

Layout

Components

Loading

Loaders express an unspecified wait time or display the length of a process.

import { Loading } from '@nextui-org/react';

Default

Indicate an action is running.

Text

You can include text in the Loading component.

Sizes

Change the size of the entire Loading with the size property.

Types

You can change the type of loading with the type prop.

Colors

You can change the color of the loading with the color property.

Text Colors

You can change the Loading text color with textColor prop

APIs

Loading Props

Attribute	Type	Accepted values	Description	Default
size	`NormalSizes`	NormalSizes	Loading size	`medium`
color	`LoadingColors`	LoadingColors	Change loading color	`primary`
textColor	`SimpleColors`	SimpleColors	Change loading text color	`default`
type	`NormalLoaders`	NormalLoaders	Selected or not (in single)	`default`
gradientBackground	`string/null`	-	Set a background for gradient loading type	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`span`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Loading types

Loading Colors

type LoadingColors =
  | 'white'
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'currentColor';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Loaders

type NormalLoaders =
  | 'default'
  | 'points'
  | 'points-opacity'
  | 'gradient'
  | 'spinner';

Modal Switch