Display

Labelled Progress

Индикатор выполнения с подписью и честным состоянием неизвестной длительности: если процент неизвестен, компонент его не выдумывает.

progress
loading
indicator
status

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/progress-001

Сборка проекта64%

Значение

Подпись

Размер

Акцент

Показать полную инструкцию

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

# Установка и размещение «progress-001» (Labelled Progress) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/progress-001.json

Registry item: https://vibeui.ru/r/progress-001.json
Ставится в: components/vibeui/progress-001.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Индикатор выполнения с подписью и честным состоянием неизвестной длительности: если процент неизвестен, компонент его не выдумывает.

Полоса выполнения с подписью слева и значением справа. Два честных состояния: известный прогресс показывает долю и процент, неизвестный — ходит отрезком по дорожке и не выставляет aria-valuenow. Два размера, зажим значения в 0–100, полная разметка progressbar. Ноль зависимостей, один файл, своя палитра.

## 3. Как использовать
import { Progress001 } from "@/components/vibeui/progress-001"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-progress-001-* и не подменять её токенами вашей темы (bg-primary, bg-secondary и подобными)
- два состояния как разные: неизвестную длительность нельзя показывать выдуманным процентом
- разметку доступности: role="progressbar", aria-valuemin, aria-valuemax и aria-valuenow только когда значение известно
- зажим значения в диапазон 0–100: полоса шире дорожки выглядит как поломка
- ширину заполнения через переменную --vibeui-progress-001-value, а не через строку в style
- tabular-nums у значения: без них проценты дёргают подпись при каждом обновлении
- правило prefers-reduced-motion, которое останавливает бегущий отрезок
- блок <style> внутри компонента — в нём вся палитра, размеры и анимация

## 6. Можно менять
- value — число 0–100 или null, если длительность неизвестна
- label — что именно выполняется
- hint — правая подпись, если проценты неуместны: «3 из 8», «12 МБ»
- size: md отдельно на экране, sm внутри строки списка
- акцент через проп accent — цвет заполнения
- ширину и внешние отступы через className

## 7. Правила
- Не используйте компонент как ползунок: это индикатор, у него нет ввода.
- Не анимируйте значение вручную таймером ради красоты — прогресс должен отражать настоящее состояние.
- Если операция длится дольше десяти секунд, добавьте рядом текст о том, что происходит: одной полосы мало.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/progress-001.json

https://vibeui.ru/r/progress-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-progress-001-*. Заполнение считается из переменной --vibeui-progress-001-value, поэтому ширина полосы задаётся числом, а не строкой со знаком процента. value={null} включает состояние неизвестной длительности: отрезок ходит по дорожке анимацией, aria-valuenow не выставляется. Значение зажимается в диапазон 0–100.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Progress001Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  /** Значение 0–100. `null` — процесс идёт, но длительность неизвестна. */
  value?: number | null
  label?: string
  /** Правая подпись: по умолчанию проценты. */
  hint?: string
  size?: "sm" | "md"
  accent?: string
}

// Идея компонента: у полосы два честных состояния. Известен прогресс — она
// показывает долю и число; неизвестен — по дорожке ходит отрезок, и никакой
// выдуманный процент не рисуется.
const STYLES = `
:where([data-vibeui-block="progress-001"]){
--vibeui-progress-001-fg:oklch(0.28 0.016 265);
--vibeui-progress-001-muted:oklch(0.54 0.014 265);
--vibeui-progress-001-track:oklch(0.92 0.006 265);
--vibeui-progress-001-accent:oklch(0.55 0.2 262);
--vibeui-progress-001-height:0.5rem;
--vibeui-progress-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="progress-001"]{
display:flex;flex-direction:column;gap:0.5rem;width:100%;
font-family:var(--vibeui-progress-001-font);color:var(--vibeui-progress-001-fg);
}
[data-vibeui-block="progress-001"][data-size="sm"]{--vibeui-progress-001-height:0.25rem}
[data-vibeui-block="progress-001"] [data-part="head"]{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
font-size:0.8125rem;
}
[data-vibeui-block="progress-001"] [data-part="hint"]{
color:var(--vibeui-progress-001-muted);font-variant-numeric:tabular-nums;
}
[data-vibeui-block="progress-001"] [data-part="track"]{
position:relative;overflow:hidden;
height:var(--vibeui-progress-001-height);
border-radius:9999px;background:var(--vibeui-progress-001-track);
}
[data-vibeui-block="progress-001"] [data-part="bar"]{
height:100%;border-radius:inherit;
background:var(--vibeui-progress-001-accent);
width:calc(var(--vibeui-progress-001-value,0) * 1%);
transition:width .3s cubic-bezier(.32,.72,0,1);
}
/* Неизвестная длительность: отрезок ходит по дорожке, процент не выдумываем. */
[data-vibeui-block="progress-001"][data-indeterminate="true"] [data-part="bar"]{
width:35%;transition:none;
animation:vibeui-progress-001-slide 1.4s ease-in-out infinite;
}
@keyframes vibeui-progress-001-slide{
0%{transform:translateX(-110%)}
100%{transform:translateX(320%)}
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="progress-001"] *{animation:none!important;transition:none!important}
[data-vibeui-block="progress-001"][data-indeterminate="true"] [data-part="bar"]{width:100%;opacity:.5}
}
`

/**
 * Индикатор выполнения с честным состоянием неизвестной длительности.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Progress001({
  value = 64,
  label = "Сборка проекта",
  hint,
  size = "md",
  accent,
  className,
  style,
  ...props
}: Progress001Props) {
  const indeterminate = value === null || value === undefined
  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value))
  const palette = {
    "--vibeui-progress-001-value": clamped,
    ...(accent ? { "--vibeui-progress-001-accent": accent } : null),
    ...style,
  } as CSSProperties

  const note = hint ?? (indeterminate ? "идёт" : `${Math.round(clamped)}%`)

  return (
    <>
      <style href="vibeui-progress-001" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="progress-001"
        data-size={size}
        data-indeterminate={indeterminate || undefined}
        className={className}
        style={palette}
      >
        {label || note ? (
          <div data-part="head">
            <span data-part="label">{label}</span>
            {note ? <span data-part="hint">{note}</span> : null}
          </div>
        ) : null}
        <div
          data-part="track"
          role="progressbar"
          aria-label={label || undefined}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={indeterminate ? undefined : Math.round(clamped)}
        >
          <div data-part="bar" />
        </div>
      </div>
    </>
  )
}