ScreenLoader
Carregamento de tela inteira ou de uma região, para esperas que a pessoa precisa entender: mensagem, etapa opcional e progresso determinado ou indeterminado. Anuncia a mensagem numa região aria-live e marca o conteúdo coberto com aria-busy e inert.
Tela inteira com progresso
scope screen cobre a página. Com progress, o anel dá lugar a uma barra com role progressbar; step mostra em que etapa a geração está.
Região com progresso indeterminado
scope region cobre só o bloco que envolve. O tom accent é o do lacre, para esperas de certificação. Com prefers-reduced-motion, o anel para de girar e a entrada não anima.
- Titular
- Marina Couto
- Tipo
- e-CPF A1
- Emissor
- AC Exemplo RFB v5
- Válido até
- 12/03/2027
Região estática
Sem children, a região é o próprio bloco do carregamento. Útil enquanto o conteúdo ainda não existe.
Aplicando o carimbo de tempo…. Etapa 2 de 3: Carimbo de tempo
Uso
<ScreenLoader
active={generating}
message="Gerando o PDF assinado…"
step={{ current: 2, total: 3, label: "Aplicando o carimbo de tempo" }}
progress={progress}
/>
<ScreenLoader scope="region" tone="accent" active={validating} message="Validando o certificado…">
<CertificateDetails />
</ScreenLoader>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| message | string | — | O que está acontecendo, em gerúndio. Anunciado por aria-live. |
| description | string | — | Contexto curto: documento, envelope ou o que está sendo consultado. |
| step | { current: number; total: number; label?: string } | — | Etapa atual, mostrada como “Etapa 2 de 3 · rótulo”. |
| progress | number | — | 0 a 100. Sem valor, o progresso é indeterminado e o anel gira. |
| active | boolean | true | Mostra o carregamento. A região aria-live continua montada quando inativo. |
| scope | "screen" | "region" | "screen" | Cobre a tela inteira ou só o bloco que envolve. |
| tone | "primary" | "accent" | "primary" | primary para ações; accent para certificação e selos. |
| icon | LucideIcon | Hourglass | Ícone no centro do emblema. |
| children | ReactNode | — | Conteúdo coberto. Recebe aria-busy e inert enquanto ativo. |
| className | string | — | No bloco da região, ou na camada de tela inteira. |