ProgressBarPage

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

Демо

Когда использовать

• Индикация навигации между страницами (роутинг SPA).
• Длительная загрузка данных без детерминированного прогресса.
• Глобальный busy-индикатор уровня layout’а.

Когда не нужен ProgressBarPage: если известен реальный процент — используйте детерминированный ProgressBar. Не показывайте ProgressBarPage для быстрых операций (< 200 мс) — это отвлекает.

Установка

pnpm add @cloud-ru/ds-progress-bar

import { ProgressBarPage } from '@cloud-ru/ds-progress-bar'

Примеры использования

Переключение inProgress

import { ProgressBarPage } from '@cloud-ru/ds-progress-bar';
import { useState } from 'react';

export function PageToggle() {
  const [loading, setLoading] = useState(false);

  return (
    <>
      <ProgressBarPage inProgress={loading} />
      <button type='button' onClick={() => setLoading(v => !v)}>
        {loading ? 'Stop' : 'Start'} loading
      </button>
    </>
  );
}

Props

Types

ProgressBarPageProps

Unions

Appearance

Storybook

Figma