Loader

An indicator that shows a loading state.

Usage

import { Loader } from '@appica/ui-react/loader'

<Loader />

Loader is an indeterminate progress indicator — it conveys "working on it" without a percentage. It comes in two shapes via variant: bar (a track with a sweeping fill, the default) and dots (three dots flowing left to right). Both read a little more like progress than a Spinner, so they suit section- and status-level waits.

Like the spinner, it's sized by font-size — set a text-* class (or inherit 1em) to scale it — and currentColor makes it match the surrounding text instead of the primary accent. It renders a role="status" element labelled "Loading".

Use Loader for "this area is loading", inline status text, and "load more" buttons. For a compact spinner inside a small button or icon button, reach for Spinner instead.

Examples

Variants

Two shapes: bar (a sweeping track) and dots (a flowing trio). Both loop indefinitely and honour prefers-reduced-motion by holding a static frame.

bar

dots

import { Loader } from '@appica/ui-react/loader'

const VARIANTS = ['bar', 'dots'] as const

export default function LoaderVariants() {
  return (
    <div className="flex items-center gap-12">
      {VARIANTS.map((variant) => (
        <div key={variant} className="flex flex-col items-center gap-3">
          <Loader variant={variant} />
          <span className="text-foreground-muted text-xs">{variant}</span>
        </div>
      ))}
    </div>
  )
}

Sizing

The loader scales with font-size, so a text-* utility resizes it — there's no size prop. Its width/height ratio is fixed, so it grows proportionally.

import { Loader } from '@appica/ui-react/loader'

export default function LoaderSizing() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <Loader className="text-xl" />
      <Loader className="text-3xl" />
      <Loader className="text-5xl" />
      <Loader className="text-7xl" />
    </div>
  )
}

Color

By default the loader uses the primary accent (with a soft track on the bar). Add currentColor and it adopts the surrounding text color instead.

import { Loader } from '@appica/ui-react/loader'

export default function LoaderColor() {
  return (
    <div className="flex items-center gap-12 text-4xl">
      <Loader />
      <span className="text-violet-500">
        <Loader currentColor />
      </span>
      <span className="text-success-emphasis">
        <Loader currentColor />
      </span>
    </div>
  )
}

Load more

A "load more" button that shows the dots loader while the next page fetches. currentColor matches the button text.

Aurora
Borealis
Cosmos

'use client'

import * as React from 'react'
import { Button } from '@appica/ui-react/button'
import { Loader } from '@appica/ui-react/loader'

const ALL = ['Aurora', 'Borealis', 'Cosmos', 'Drift', 'Ember', 'Flux', 'Glow', 'Halo', 'Ion']

export default function LoaderButton() {
  const [count, setCount] = React.useState(3)
  const [loading, setLoading] = React.useState(false)

  const loadMore = () => {
    setLoading(true)
    setTimeout(() => {
      setCount((c) => Math.min(c + 3, ALL.length))
      setLoading(false)
    }, 1400)
  }

  return (
    <div className="flex w-56 flex-col gap-2">
      <ul className="flex flex-col gap-2">
        {ALL.slice(0, count).map((item) => (
          <li
            key={item}
            className="bg-background-subtle border-border-muted text-foreground-emphasis rounded-lg border px-4 py-3 text-sm"
          >
            {item}
          </li>
        ))}
      </ul>
      {count < ALL.length && (
        <Button onClick={loadMore} disabled={loading} className="self-center">
          {loading ? <Loader variant="dots" currentColor className="text-3xl" /> : 'Load more'}
        </Button>
      )}
    </div>
  )
}

Section loading

Drive a panel from your own loading state — show a centred loader while data is in flight, then swap in the content. The Refresh button re-runs it.

Revenue

Crunching the numbers…

'use client'

import * as React from 'react'
import { Button } from '@appica/ui-react/button'
import { Loader } from '@appica/ui-react/loader'

export default function LoaderSection() {
  const [loading, setLoading] = React.useState(true)

  const load = React.useCallback(() => {
    setLoading(true)
    const timer = setTimeout(() => setLoading(false), 1800)
    return () => clearTimeout(timer)
  }, [])

  React.useEffect(() => load(), [load])

  return (
    <div className="border-border bg-background w-80 overflow-hidden rounded-xl border">
      <div className="border-border-muted bg-background-subtle flex items-center justify-between border-b px-4 py-2.5">
        <span className="text-foreground-intense text-sm font-semibold">Revenue</span>
        <Button variant="outline" size="sm" onClick={load} disabled={loading}>
          Refresh
        </Button>
      </div>
      <div className="flex h-32 items-center justify-center p-4">
        {loading ? (
          <div className="flex flex-col items-center gap-3">
            <Loader variant="bar" className="text-4xl" />
            <span className="text-foreground-muted text-xs">Crunching the numbers…</span>
          </div>
        ) : (
          <div className="text-center">
            <p className="text-foreground-intense mb-0.5 text-3xl font-semibold">$48,250</p>
            <p className="text-success-emphasis text-sm">+12.5% this month</p>
          </div>
        )}
      </div>
    </div>
  )
}

Inline status

Set currentColor and drop a loader straight into a line of text — sized in em, it sits on the baseline next to a "syncing…" or "uploading…" message and takes the text's color.

Syncing your changesUploading 3 files

import { Loader } from '@appica/ui-react/loader'

export default function LoaderInline() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <span className="text-foreground-muted inline-flex items-center gap-2">
        Syncing your changes
        <Loader variant="dots" currentColor className="text-[1.6em]" />
      </span>
      <span className="text-secondary-emphasis inline-flex items-center gap-2">
        Uploading 3 files
        <Loader variant="bar" currentColor className="text-[1.6em]" />
      </span>
    </div>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

Beside text, the loader sits on the correct side under RTL since it follows the inline flow. For setup details and caveats, see the RTL guide.

جارٍ مزامنة تغييراتكجارٍ رفع 3 ملفات

API reference

Loader renders a single <span role="status"> and forwards ref, className, and any other span attributes.

Prop	Type	Default	Description
`variant`	`'bar' \| 'dots'`	`'bar'`	The animated shape.
`currentColor`	`boolean`	`false`	Inherit the surrounding text color (`currentColor`) instead of the primary accent.
`aria-label`	`string`	`'Loading'`	Accessible name for the `role="status"` region.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`. Set a `text-*` size here — the loader scales with `font-size`.

Accessibility

The loader is a role="status" live region with a default aria-label="Loading"; pass a more specific label (e.g. "Uploading files") when it helps.
When a loader replaces a section's content, keep one labelled status in the region rather than several, so screen readers announce a single "loading" state.
A loader sitting beside text that already states the status can be marked aria-hidden to avoid a duplicate announcement.
The animation is replaced by a static frame when the user prefers reduced motion.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback