
- Utilizare
- Proprietăți
Bara de Progres Circulară
Indică progresul unei sarcini, utilizată adesea pe ecranele de încărcare sau în zonele unde doriți să comunicați procesele continue utilizatorului.- Utilizare
- Proprietăți

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| Proprietăți | Tip | Descriere | Implicit |
|---|---|---|---|
| durată | număr | Durata totală a animației barei de progres în milisecunde | 3 |
| întârziere | număr | Întârzierea în pornirea animației barei de progres în milisecunde | 0 |
| easing | șir | Funcția de accelerare (easing) pentru animația barei de progres | easeInOut |
| înălțimeBară | număr | Înălțimea barei în pixeli | 24 |
| culoareBară | şir | Culoarea barei | gray80 |
| pornireAutomată | boolean | Dacă true, animația barei de progres pornește automat când componenta se montează | adevărat |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| Proprietăți | Tip | Descriere | Implicit |
|---|---|---|---|
| dimensiune | număr | Dimensiunea barei de progres circulare | 50 |
| lățimeBară | număr | Lățimea liniei barei de progres | 5 |
| culoareBară | șir | Culoarea barei de progres | currentColor |
A fost această pagină utilă?