
- Použití
- Vlastnosti
Kruhový indikátor průběhu
Udává průběh úkolu, často používané na načítacích obrazovkách nebo v oblastech, kde chcete uživateli sdělovat probíhající procesy.- Použití
- Vlastnosti

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| Vlastnosti | Typ | Popis | Výchozí |
|---|---|---|---|
| trvání | číslo | The total duration of the progress bar animation in milliseconds | 3 |
| zpoždění | číslo | Zpoždění spuštění animace indikačního pruhu v milisekundách | 0 |
| easing | textový řetězec | Easing function for the progress bar animation | easeInOut |
| barHeight | číslo | Výška pruhu v pixelech | 24 |
| barvaPruhu | textový řetězec | Barva pruhu | gray80 |
| autoStart | booleovská hodnota | Pokud true, animace indikačního pruhu se automaticky spustí při načtení komponenty | pravda |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| Vlastnosti | Typ | Popis | Výchozí |
|---|---|---|---|
| velikost | číslo | Velikost kruhového indikačního pruhu | 50 |
| barWidth | číslo | Šířka čáry indikačního pruhu | 5 |
| barvaPruhu | textový řetězec | Barva indikačního pruhu | současnáBarva |
Byla tato stránka užitečná?