Progress Progresso
Introduction
Um componente de estado visual que comunica o progresso de conclusão de uma operação. Exibe valores de estado em tempo real através de uma barra linear padrão ou de um mostrador circular moderno. Usado principalmente para guiar usuários durante assistentes multi-etapas, uploads de conteúdo, processamento de arquivos ou instalações do sistema.
O componente Progress está totalmente integrado como bloco progress no Page Builder, permitindo que autores e desenvolvedores configurem facilmente intervalos visuais, temas, tamanhos, rótulos e layouts de indicadores diretamente no CMS.
Usage
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam indicadores de progresso interativos.
1. Barra de progresso linear padrão com rótulo de estado
Um indicador de barra linear clássico que mostra o progresso de download ou processamento com detalhes de rótulo ativo e texto de porcentagem formatado.
{
"type": "progress",
"label": "System Backup",
"value": 72,
"showValueText": true,
"type": "linear",
"size": "md"
}
2. Medidor de progresso circular compacto
Renderiza a métrica de conclusão como um mostrador circular compacto. Útil para gráficos de resumo estatístico, widgets de dashboard ou itens de grade isolados.
{
"type": "progress",
"label": "Storage Used",
"type": "circular",
"value": 40,
"showValueText": true
}
3. Progresso listrado acentuado com cor personalizada (verde de sucesso)
Demonstra como aplicar uma paleta de tema dedicada, um padrão de listras visual e uma escala de layout grande a uma barra de progresso.
{
"type": "progress",
"label": "Uploading media files",
"value": 85,
"showValueText": true,
"striped": true,
"colorPalette": "green",
"size": "lg"
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Rótulo de progresso (label) | string | - | Cabeçalho descritivo opcional acima da pista. |
Valor atual (value) | number | 0 | Valor numérico de conclusão. Use null para um estado indeterminado (carregando). |
Valor mínimo (min) | number | 0 | Limite inferior da escala de progresso. |
Valor máximo (max) | number | 100 | Limite superior da escala de progresso. |
Exibir porcentagem (showValueText) | boolean | false | Exibe o texto de porcentagem exato ao lado da pista. |
Tipo de indicador (type) | select | "linear" | Formato visual do layout. • Opções: "linear", "circular". |
Variante visual (variant) | select | "solid" | Estilo visual da pista e do preenchimento. • Opções: "solid", "subtle". |
Forma da borda (shape) | select | "full" | Arredondamento de cantos das barras lineares. • Opções: "square", "rounded", "full". |
Pista listrada (striped) | boolean | false | Renderiza um padrão diagonal listrado em barras lineares. |
Tema de cor (colorPalette) | select | "blue" | Paleta de tema do preenchimento. • Opções: blue, green, red, purple, orange, amber, cyan, slate. |
Escala de tamanho (size) | select | "md" | Controla a altura ou o raio circular. • Opções: "xs", "sm", "md", "lg", "xl". |
Developer Notes & Accessibility
- Sem hidratação (somente estático): O componente Progress opera puramente via ligações de layout e animações CSS padrão, sendo um componente estático (Tier 3) sem JavaScript do lado do cliente.
- Conformidade WAI-ARIA: Internamente, compila para invólucros semânticos de progresso (
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemax). Sevaluenão estiver definido ou for nulo, muda automaticamente para um estado de carregamento indeterminado.