Getting Started
InstallationManual InstallationChangeLogCLIDocumentationMCP Server
Foundation
Core Color SystemMapping Color SystemModsTypography
Components
Buttons
ActionButtonActionsGroupButtonButtonGroupLinkButtonToggleButton
Inputs
CheckboxDatePickerFormInputInputFieldInputOTPRadioRadioCardSelectSlideDatePickerSwitchTextarea
Fields
BadgeFieldFieldHintImageAttachmentInnerLabelFieldLabelFieldPasswordLevel
Data Display
AvatarBadgeCalendarCardCountBadgeDividerSkeletonTableTextEditor
Overlays
AlertDialogDialogDropDownMenuPopoverSpinLoadingToastTooltip
Navigation
BreadcrumbTabFormItemTreeDropDown
Layout
CN LayoutField SectionTree Sub Layout

Spin Loading

Overview

The SpinLoading component provides a visually appealing loading indicator with theming and size options. It allows displaying custom content in the center of the spinner.

Features

  • Size Options
    S
    M
    L
  • Theme Support
    Light
    Dark
    Default
  • Custom Content
    Children Prop
  • Animated Loading Icon
    Spinning

Installation

To install the component, run:
npx torch-glare@latest add SpinLoading

Basic Usage

With Custom Content

API

Resize the table to see the full API values.
prop
type
default
size
"S"
"M"
"L"
"M"
theme
"light"
"dark"
"default"
"light"
children
ReactNode
null
className
string
null