Прогрес

Тонка смуга, яка заповнюється по мірі виконання завдання — завантаження, встановлення, багатоетапна реєстрація — з використанням необруталістичного стилю оформлення з рамками та тінями.

"use client"

import * as React from "react"

Індикатор progress показує, наскільки виконано задачу — трек, що заповнюється від 0 до 100. Побудований на компоненті Base UI Progress і оформлений за рецептом необруталізму: товста рамка, різка тінь, суцільна заливка.

Коли це стане в пригоді:

Завантаження та вивантаження файлів — визначений прогрес у байтах із видимим відсотком.
Багатокрокові сценарії — онбординг, checkout і майстри; смужка показує, як далеко користувач.
Довгі завдання — імпорти, експорти та встановлення зі звітом про завершення із сервера.

Встановлення


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

Встановіть такі залежності:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Скопіюйте та вставте наведений нижче код у свій проєкт.

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.

Використання

import { Progress } from "@/components/ui/progress"

<Progress value={33} />

Композиція

З міткою та значенням

Використовуйте ProgressLabel та ProgressValue, щоб додати відображення мітки та значення.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Приклади

Мітка

Використовуйте ProgressLabel та ProgressValue, щоб додати відображення мітки та значення.

Upload progress

import {
  Progress,
  ProgressLabel,

Керований

Смуга прогресу, якою можна керувати за допомогою slider.

"use client"

import * as React from "react"

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

تقدم الرفع

"use client"

import * as React from "react"

Доступність

Progress — індикатор стану, а не контроль: він ніколи не отримує фокус і не має клавіатурних взаємодій. Base UI рендерить role="progressbar" з aria-valuemin, aria-valuemax і aria-valuenow, а ProgressLabel автоматично пов’язується через aria-labelledby — віддавайте перевагу йому (або aria-label) над непідписаною смужкою, щоб програми зчитування з екрана казали, що саме завантажується, а не лише відсоток. Передайте value={null}, коли завершення невідоме; смужка перейде в indeterminate-стан.

Довідник API

Перегляньте документацію Base UI Progress.