Progress: Right to left

The fill and the indeterminate slide start from the right. Pass locale to format the value in the reader's digits.

جارٍ التحميل

جارٍ الاتصال…

import {
  Progress,
  ProgressCircle,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

export function ProgressRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6">
      <Progress value={65} locale="ar-EG">
        <ProgressLabel>جارٍ التحميل</ProgressLabel>
        <ProgressValue />
      </Progress>
      <Progress value={null}>
        <ProgressLabel>جارٍ الاتصال…</ProgressLabel>
      </Progress>
      <ProgressCircle value={65} size="xl" locale="ar-EG" aria-label="التقدم">
        <ProgressValue />
      </ProgressCircle>
    </div>
  )
}

Add this example

This adds the example as components/examples/progress/rtl.tsx, together with the Progress component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/progress-rtl.json

To add only the component, follow the Progress installation.

Props in this example

The Progress props this example sets, from the API reference.

Progress

Prop	Type	Default
`value`null makes the bar indeterminate.	`number \| null`	`–`
`locale`	`Intl.LocalesArgument`	`"en-US"`

ProgressCircle

Prop	Type	Default
`value`null spins an arc.	`number \| null`	`–`
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`
`locale`	`Intl.LocalesArgument`	`"en-US"`

Every prop is in the Progress API reference.

More Progress examples

See them all, with keyboard support and accessibility notes, on the Progress page.