
- Uso
- Propriedades
Barra de Progresso Circular
Indica o progresso de uma tarefa, frequentemente usado em telas de carregamento ou áreas onde você deseja comunicar processos em andamento ao usuário.- Uso
- Propriedades

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| Propriedades | Tipo | Descrição | Padrão |
|---|---|---|---|
| duração | número | A duração total da animação da barra de progresso em milissegundos | 3 |
| atraso | número | O atraso no início da animação da barra de progresso em milissegundos | 0 |
| easing | string | Função de facilitação para a animação da barra de progresso | easeInOut |
| barHeight | número | A altura da barra em pixels | 24 |
| barColor | string | A cor da barra | cinza80 |
| autoStart | booleano | Se verdadeiro, a animação da barra de progresso começa automaticamente quando o componente é montado | verdadeiro |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| Propriedades | Tipo | Descrição | Padrão |
|---|---|---|---|
| tamanho | número | O tamanho da barra de progresso circular | 50 |
| barWidth | número | A largura da linha de progresso | 5 |
| barColor | string | A cor da barra de progresso | corAtual |