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 property color.

Text Colors

You can change the Loading text color with textColor prop

APIs

Loading Props

AttributeTypeAccepted valuesDescriptionDefault
sizeNormalSizesNormalSizesLoading sizemedium
colorLoadingColorsLoadingColorsChange loading colorprimary
textColorSimpleColorsSimpleColorsChange loading text colordefault
typeNormalLoadersNormalLoadersSelected or not (in single)default
gradientBackgroundstring/null-Set a background for gradient loading type-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsspan
...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';
gradient blue backgroundgradient violet background