Progress

Отображает состояние задачи, выполнение которой занимает много времени.

"use client";

import { useEffect, useState } from "react";
import { Progress } from "@/components/ui/progress";

export default function Particle() {
  const [value, setValue] = useState(20);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue((current) =>
        Math.min(100, Math.round(current + Math.random() * 25)),
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <Progress value={value} />;
}

Установка


pnpm dlx shadcn@latest add @oracul/progress

Использование

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

<Progress value={40} />

Примечание: если вы отрисовываете дочерние элементы внутри Progress, вы также должны включить в него ProgressTrack и ProgressIndicator. Без них полоса не будет отображаться. Если дочерние элементы не переданы, дорожка и индикатор по умолчанию отрисовываются за вас.

API

Progress

Корневой компонент. Стилизованная обёртка для Progress.Root из Base UI. Если дочерние элементы не переданы, автоматически отрисовывает дорожку и индикатор.

ProgressTrack

Контейнер-дорожка для индикатора прогресса. Стилизованная обёртка для Progress.Track из Base UI.

ProgressIndicator

Визуальный индикатор, показывающий текущий прогресс. Стилизованная обёртка для Progress.Indicator из Base UI.

ProgressLabel

Текст метки для полосы прогресса. Стилизованная обёртка для Progress.Label из Base UI.

ProgressValue

Отображает текущее значение. Стилизованная обёртка для Progress.Value из Base UI.

Примеры

С меткой и значением

Экспорт данных

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/components/ui/progress";

export default function Particle() {
  return (
    <Progress value={60}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Экспорт данных</ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

С форматированным значением

Загрузка

"use client";

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/components/ui/progress";

export default function Particle() {
  return (
    <Progress max={512} value={502}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Загрузка</ProgressLabel>
        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

На этой странице

Установка Использование API Progress ProgressTrack ProgressIndicator ProgressLabel ProgressValue Примеры С меткой и значением С форматированным значением