Kaapi UI
← Back to Design System

Loading Indicator

Animated loading indicators with multiple styles, sizes, and optional labels.

Types

Simple circular line with partial fill

<LoadingIndicator type="line-simple" size="lg" />

Single line circular spinner

<LoadingIndicator type="line-spinner" size="lg" />

Dotted circle with gradient effect

<LoadingIndicator type="dot-circle" size="lg" />

Sizes

sm
md
lg
xl

Available sizes: sm (32px), md (48px), lg (56px), xl (64px)

<LoadingIndicator type="line-simple" size="sm|md|lg|xl" />

With Label

Loading...
Please wait
Processing
<LoadingIndicator 
  type="line-simple" 
  size="md" 
  label="Loading..." 
/>

Size Variations with Labels

Small
Medium
Large
Extra Large

Label font size adjusts automatically based on indicator size

<LoadingIndicator type="line-simple" size="xl" label="Loading..." />

API Reference

PropsTypeDefaultDescription
type? "line-simple" | "line-spinner" | "dot-circle"line-simpleThe visual style of the loading indicator.
size? "sm" | "md" | "lg" | "xl""sm"The size of the loading indicator.
label?string-Optional text label displayed below the indicator.