مؤشر التحميل

import { Spinner } from 'topclassui/spinner'

/** The docs sample, a route-level loading fallback: the text names the wait, so the spinner is hidden. */
export default function Demo() {
  return (
    <div className="flex items-center justify-center gap-3 py-16">
      <Spinner size="lg" aria-hidden />
      <p className="text-muted">Building your preview</p>
    </div>
  )
}

import { Spinner } from 'topclassui/spinner'

/** The five icon steps, 16 to 40 px, each named "Loading" by default. */
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </div>
  )
}

import { Spinner } from 'topclassui/spinner'

/** Each of the six tones at the default size, drawn in the tone's on-soft colour. */
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Spinner tone="primary" />
      <Spinner tone="neutral" />
      <Spinner tone="success" />
      <Spinner tone="warning" />
      <Spinner tone="danger" />
      <Spinner tone="info" />
    </div>
  )
}

import { Spinner } from 'topclassui/spinner'

/** text-current replaces the tone, so each spinner takes the colour of the line it sits in. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <p className="flex items-center gap-2 rounded-box bg-danger-soft p-3 text-danger-on-soft">
        <Spinner size="sm" className="text-current" aria-hidden />
        Retrying the payment
      </p>
      <p className="flex items-center gap-2 text-muted">
        <Spinner size="sm" className="text-current" aria-hidden />
        Saving the draft
      </p>
    </div>
  )
}

import { Spinner } from 'topclassui/spinner'

/** custom sets no size, so each spinner is 1em and grows with the type step around it. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3 text-body">
      <p className="flex items-center gap-2 text-sm">
        <Spinner size="custom" aria-hidden />
        Syncing at text-sm
      </p>
      <p className="flex items-center gap-2 text-lg">
        <Spinner size="custom" aria-hidden />
        Syncing at text-lg
      </p>
      <p className="flex items-center gap-2 text-3xl">
        <Spinner size="custom" aria-hidden />
        Syncing at text-3xl
      </p>
    </div>
  )
}

import { ar } from 'topclassui/labels/ar'
import { Spinner } from 'topclassui/spinner'

/** The Arabic labels name the first three; the last sits beside its own text, so it is hidden. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-3">
        <Spinner labels={ar} size="sm" />
        <Spinner labels={ar} />
        <Spinner labels={ar} size="lg" tone="neutral" />
      </div>
      <p className="flex items-center gap-2 text-body">
        <Spinner size="sm" aria-hidden />
        جارٍ تحميل المعاينة
      </p>
    </div>
  )
}