
- Использование
- Свойства
Круговой индикатор прогресса
Указывает на прогресс задачи, часто используется на экранах загрузки или в областях, где необходимо сообщить пользователю о текущих процессах.- Использование
- Свойства

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| Свойства | Тип | Описание | По умолчанию |
|---|---|---|---|
| Продолжительность | число | Общая продолжительность анимации индикатора прогресса в миллисекундах | 3 |
| Задержка | число | Задержка начала анимации индикатора прогресса в миллисекундах | 0 |
| Сглаживание | строка | Сглаживающая функция для анимации индикатора прогресса | easeInOut |
| Высота индикатора | число | Высота полосы в пикселях | 24 |
| Цвет полосы | строка | Цвет полосы | gray80 |
| Автозапуск | булево | Если true, анимация индикатора прогресса начинается автоматически при загрузке компонента | истина |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| Свойства | Тип | Описание | По умолчанию |
|---|---|---|---|
| Размер | число | Размер кругового индикатора прогресса | 50 |
| Ширина полосы | число | Ширина линии индикатора прогресса | 5 |
| Цвет полосы | строка | Цвет индикатора прогресса | currentColor |
Была ли эта страница полезной?