ArcaneLoader#

An animated loading spinner for indicating processing or loading states.

Basic Usage#

ArcaneLoader()

Properties#

Sizes#

// Small
ArcaneLoader(size: LoaderSize.small)

// Medium (default)
ArcaneLoader(size: LoaderSize.medium)

// Large
ArcaneLoader(size: LoaderSize.large)

// Extra large
ArcaneLoader(size: LoaderSize.xlarge)

Colors#

// Accent (default)
ArcaneLoader(color: LoaderColor.accent)

// Default
ArcaneLoader(color: LoaderColor.default_)

// Muted
ArcaneLoader(color: LoaderColor.muted)

// White
ArcaneLoader(color: LoaderColor.white)

Examples#

Loading State#

if (isLoading)
  ArcaneCenter(
    styles: const ArcaneStyleData(
      minHeightCustom: '200px',
    ),
    child: ArcaneLoader(),
  )
else
  ContentWidget(),

Button Loading#

ArcaneButton.primary(
  label: isLoading ? '' : 'Submit',
  leading: isLoading ? ArcaneLoader(size: LoaderSize.small, color: LoaderColor.white) : null,
  isDisabled: isLoading,
  onPressed: submit,
)

Full Page Loading#

ArcaneCenter(
  styles: const ArcaneStyleData(
    minHeightCustom: '100vh',
  ),
  child: ArcaneColumn(
    crossAxisAlignment: AlignItems.center,
    gap: Gap.md,
    children: [
      ArcaneLoader(size: LoaderSize.large),
      ArcaneText('Loading...'),
    ],
  ),
)

Card Loading#

ArcaneCard(
  child: isLoading
      ? ArcaneCenter(
          styles: const ArcaneStyleData(heightCustom: '200px'),
          child: ArcaneLoader(),
        )
      : CardContent(),
)

Loading Overlay#

ArcaneStack(
  children: [
    ContentWidget(),
    if (isLoading)
      ArcaneDiv(
        styles: const ArcaneStyleData(
          position: Position.absolute,
          inset: Inset.zero,
          background: Background.overlay,
          display: Display.flex,
          justifyContent: JustifyContent.center,
          alignItems: AlignItems.center,
        ),
        children: [
          ArcaneLoader(size: LoaderSize.large),
        ],
      ),
  ],
)

Table Loading#

ArcaneDataTable(
  columns: [...],
  rows: isLoading
      ? [
          DataRow(cells: [
            ArcaneCenter(
              styles: const ArcaneStyleData(padding: PaddingPreset.xl),
              child: ArcaneLoader(),
            ),
          ]),
        ]
      : dataRows,
)

Inline Loading#

ArcaneRow(
  gap: Gap.sm,
  crossAxisAlignment: AlignItems.center,
  children: [
    ArcaneLoader(size: LoaderSize.small),
    ArcaneText('Saving...'),
  ],
)

Loading Message#

ArcaneCenter(
  child: ArcaneColumn(
    crossAxisAlignment: AlignItems.center,
    gap: Gap.lg,
    children: [
      ArcaneLoader(size: LoaderSize.xlarge),
      ArcaneColumn(
        crossAxisAlignment: AlignItems.center,
        gap: Gap.xs,
        children: [
          ArcaneHeading(text: 'Processing'),
          ArcaneText('Please wait while we process your request'),
        ],
      ),
    ],
  ),
)

Related Components#

• ArcaneLoadingSpinner - Alternative spinner
• ArcaneDotsLoader - Dots animation
• ArcaneLoadingState - Full loading state
• ArcaneSkeleton - Skeleton loading