Progress

Apresentação

O componente Progress é responsável por exibir barras de progresso lineares e radiais. Ele é ideal para mostrar o progresso de uma operação, carregamento ou qualquer processo que possa ser quantificado.

Quando usar

• Para mostrar o progresso de uploads
• Em processos de carregamento
• Para exibir o status de uma operação
• Em formulários multi-etapas
• Para indicar o progresso de downloads
• Em processos de instalação
• Para mostrar o status de sincronização
• Em tarefas em segundo plano

Forma básica de uso

import { Progress, ProgressRadial } from 'eitri-luminus';

// Progress básico
<Progress value={70} max={100} />

// Progress com classes personalizadas
<Progress 
  value={50} 
  max={100} 
  className="progress-primary" 
/>

// Progress em diferentes tamanhos
<Progress value={30} max={100} className="progress-xs" />
<Progress value={50} max={100} className="progress-sm" />
<Progress value={70} max={100} className="progress-md" />
<Progress value={90} max={100} className="progress-lg" />

// Progress com diferentes cores
<Progress value={40} max={100} className="progress-primary" />
<Progress value={60} max={100} className="progress-secondary" />
<Progress value={80} max={100} className="progress-accent" />

// Progress Radial básico
<ProgressRadial value={70} />

// Progress Radial com valor exibido
<ProgressRadial value={85} displayValue />

// Progress Radial com classes personalizadas
<ProgressRadial 
  value={60} 
  className="text-primary" 
/>

Propriedades

Progress

Propriedade	Tipo	Descrição
value	number	Valor atual do progresso
max	number	Valor máximo do progresso
className	string	Classes CSS adicionais
id	string	Identificador único do componente

ProgressRadial

Propriedade	Tipo	Descrição
value	number	Valor atual do progresso (0-100)
displayValue	boolean	Exibe o valor numérico no centro
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

Os componentes Progress e ProgressRadial herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O Progress usa a classe 'progress' para estilização base
• O ProgressRadial usa a classe 'radial-progress' para estilização base
• Ambos incluem o atributo role="progressbar" para acessibilidade
• É possível personalizar a aparência usando classes do Tailwind
• Os componentes são responsivos por padrão
• Suportam diferentes variantes de estilo e cores
• O ProgressRadial usa CSS custom properties para o valor
• O Progress suporta valores personalizados de máximo
• Ambos mantêm a semântica HTML apropriada
• Podem ser combinados com outros componentes
• Suportam diferentes tamanhos e cores
• São ideais para feedback visual de progresso