Feedback

Indica progresso o conto alla rovescia e si muove da destra a sinistra.

Utilizzo
Props

import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};

Props	Tipo	Descrizione	Predefinito
durata	numero	La durata totale dell’animazione della barra di progresso in millisecondi	3
ritardo	numero	Il ritardo nell’avvio dell’animazione della barra di progresso in millisecondi	0
smorzamento	stringa	Funzione di smorzamento per l’animazione della barra di progresso	easeInOut
altezzaBarra	numero	L’altezza della barra in pixel	24
coloreBarra	stringa	Il colore della barra	gray80
avvioAutomatico	booleano	Se `true`, l’animazione della barra di progresso inizia automaticamente quando il componente viene montato	`vero`

Barra di progresso circolare

Indica il progresso di un’attività, spesso utilizzata in schermate di caricamento o aree in cui si desidera comunicare processi in corso all’utente.

Utilizzo
Proprietà

import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};

Proprietà	Tipo	Descrizione	Predefinito
dimensione	numero	La dimensione della barra di progresso circolare	50
larghezzaBarra	numero	La larghezza della linea della barra di progresso	5
coloreBarra	stringa	Il colore della barra di progresso	currentColor

Welcome

Core Concepts

Barra di progresso circolare

​Barra di progresso circolare

Barra di progresso circolare