Прогресс

Тонкая полоса, которая заполняется по мере выполнения задачи — загрузки, установки, многоэтапной регистрации — с использованием стилистических приёмов необрутализма, таких как рамки и тени.

"use client"

import * as React from "react"

Progress bar показывает, какая часть задачи уже сделана — трек, заполняющийся от 0 до 100. Построен на компоненте Base UI Progress и оформлен по рецепту необрутализма: толстая рамка, жёсткая тень, сплошная заливка.

Когда это пригодится:

Загрузки и скачивания файлов — determinate, byte-driven progress с видимым процентом.
Многошаговые сценарии — onboarding, checkout, wizards; полоса показывает, как далеко пользователь.
Долгие задачи — импорты, экспорты и установки, отчитывающиеся о завершении с сервера.

Установка


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) unlabeled-полосе, чтобы программы чтения с экрана говорили, что грузится, а не только процент. Передайте value={null}, когда completion неизвестен: полоса перейдёт в indeterminate-состояние.

Справочник API

См. документацию Base UI Progress.