LoadingIndicator

Props

API reference for LoadingIndicator. For usage examples, see the React tab.

Name	Type	Default
children	`ChildrenOrFunction<ProgressBarRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.
isDisabled	`boolean`	`false`
Adds a muted gray color to the LoadingIndicator, overriding the active variant.
size	`"lg" \| "md" \| "sm"`	`md`
The size of the LoadingIndicator.
variant	`"brand" \| "dark" \| "light"`	`brand`
The color variant of the LoadingIndicator.

Name	Type	Default
aria-describedby	`string`
Identifies the element (or elements) that describes the object.
aria-details	`string`
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`
Defines a string value that labels the current element.
aria-labelledby	`string`
Identifies the element (or elements) that labels the current element.
id	`string`
The element's unique identifier. See MDN (opens in new tab).

Name	Type	Default
dir	`string`
hidden	`boolean`
inert	`boolean`
lang	`string`
render	`DOMRenderFunction<"div", ProgressBarRenderProps>`
Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	`string \| null`
A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
suppressHydrationWarning	`boolean`
A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See React docs (opens in new tab).
translate	`"no" \| "yes"`

Name	Type	Default
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`
onAuxClick	`MouseEventHandler<HTMLDivElement>`
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`
onClick	`MouseEventHandler<HTMLDivElement>`
onClickCapture	`MouseEventHandler<HTMLDivElement>`
onContextMenu	`MouseEventHandler<HTMLDivElement>`
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`
onDoubleClick	`MouseEventHandler<HTMLDivElement>`
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`
onLostPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`
onMouseDown	`MouseEventHandler<HTMLDivElement>`
onMouseDownCapture	`MouseEventHandler<HTMLDivElement>`
onMouseEnter	`MouseEventHandler<HTMLDivElement>`
onMouseLeave	`MouseEventHandler<HTMLDivElement>`
onMouseMove	`MouseEventHandler<HTMLDivElement>`
onMouseMoveCapture	`MouseEventHandler<HTMLDivElement>`
onMouseOut	`MouseEventHandler<HTMLDivElement>`
onMouseOutCapture	`MouseEventHandler<HTMLDivElement>`
onMouseOver	`MouseEventHandler<HTMLDivElement>`
onMouseOverCapture	`MouseEventHandler<HTMLDivElement>`
onMouseUp	`MouseEventHandler<HTMLDivElement>`
onMouseUpCapture	`MouseEventHandler<HTMLDivElement>`
onPointerCancel	`PointerEventHandler<HTMLDivElement>`
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`
onPointerDown	`PointerEventHandler<HTMLDivElement>`
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`
onPointerEnter	`PointerEventHandler<HTMLDivElement>`
onPointerLeave	`PointerEventHandler<HTMLDivElement>`
onPointerMove	`PointerEventHandler<HTMLDivElement>`
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOut	`PointerEventHandler<HTMLDivElement>`
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOver	`PointerEventHandler<HTMLDivElement>`
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`
onPointerUp	`PointerEventHandler<HTMLDivElement>`
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`
onScroll	`UIEventHandler<HTMLDivElement>`
onScrollCapture	`UIEventHandler<HTMLDivElement>`
onTouchCancel	`TouchEventHandler<HTMLDivElement>`
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`
onTouchEnd	`TouchEventHandler<HTMLDivElement>`
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`
onTouchMove	`TouchEventHandler<HTMLDivElement>`
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`
onTouchStart	`TouchEventHandler<HTMLDivElement>`
onTouchStartCapture	`TouchEventHandler<HTMLDivElement>`
onTransitionCancel	`TransitionEventHandler<HTMLDivElement>`
onTransitionCancelCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionEnd	`TransitionEventHandler<HTMLDivElement>`
onTransitionEndCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionRun	`TransitionEventHandler<HTMLDivElement>`
onTransitionRunCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionStart	`TransitionEventHandler<HTMLDivElement>`
onTransitionStartCapture	`TransitionEventHandler<HTMLDivElement>`
onWheel	`WheelEventHandler<HTMLDivElement>`
onWheelCapture	`WheelEventHandler<HTMLDivElement>`

Name	Type	Default
className	`string`
Additional CSS class name to apply to the component.
style	`StyleOrFunction<ProgressBarRenderProps>`
The inline style (opens in new tab) for the element. A function may be provided to compute the style based on component state.

LoadingIndicator

Props

Accessibility (5)(5 props)

Advanced (8)(8 props)

Events (64)(64 props)

Styling (2)(2 props)