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, you can also set a custom size in px.

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
sizeNormalSizes numberNormalSizesLoading sizemedium
colorSimpleColors stringSimpleColorsChange loading colorprimary
textColorSimpleColorsSimpleColorsChange loading text colordefault
typeNormalLoadersNormalLoadersSelected or not (in single)default
gradientBackgroundstring/null-Set a background for gradient loading type-
...HTMLAttributes'id', 'className', ...Native props-

Loading types

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

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

Normal Loaders

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