Loading

A spinner component for indicating loading states.

Anatomy

<Loading.Spinner />

Usage

import { Loading } from '@ivaldi/ui'

Default

<Loading.Spinner />

With Accessibility Labels

<Loading.Spinner aria-label="Loading content..." />

Sizes

<div className="flex items-center gap-4">
  <Loading.Spinner size="xs" />
  <Loading.Spinner size="sm" />
  <Loading.Spinner size="default" />
  <Loading.Spinner size="lg" />
  <Loading.Spinner size="xl" />
</div>

Colors

<div className="flex items-center gap-4">
  <Loading.Spinner color="default" />
  <Loading.Spinner color="primary" />
  <Loading.Spinner color="accent" />
  <Loading.Spinner color="success" />
  <Loading.Spinner color="warning" />
  <Loading.Spinner color="danger" />
</div>

Loading.Spinner Props

PropTypeDefault