Como ele é
A página fica coberta por um véu desfocado, branco no modo claro e preto no escuro, mais sólido no centro e translúcido nas bordas. No meio, uma coluna de etapas, cada uma com ícone e texto. A etapa em andamento mostra um ícone de setas circulares girando; as concluídas trocam para um círculo preenchido com sinal de confirmado, as próximas aparecem apagadas, e todas ficam mais transparentes quanto mais longe estão da atual. A cada avanço, a lista inteira sobe um pouco, como créditos de filme. Uma etapa pode ganhar um texto de conclusão logo abaixo, e um botão de fechar no canto pode ser escondido.
Você pode estar procurando isto se pediu algo assim
- tela de carregamento mostrando cada etapa do que está acontecendo
- lista de passos que vão ganhando check enquanto o sistema processa
- loading bonito para quando o sistema demora para gerar o relatório
- mostrar o progresso do pagamento passo a passo antes de redirecionar
- aquela tela que vai marcando as etapas tipo instalando, configurando, pronto
- deixar a espera menos chata enquanto a IA gera a proposta
Também chamado de
- checklist de carregamento
- carregador por etapas
- step loader
- loading com etapas
- progress steps overlay
- tela de processamento
Quando usar
- Geração de relatórios, propostas ou contratos que leva alguns segundos
- Confirmação de pagamento e criação de pedido antes de redirecionar
- Onboarding que configura a conta em várias tarefas no servidor
- Ferramentas de IA que passam por etapas como ler, analisar e escrever
Quando evitar
- Ações rápidas, de menos de um segundo, em que a tela cheia atrapalha mais do que ajuda
- Etapas inventadas só para parecer trabalho, que minam a confiança quando a pessoa percebe
Como pedir para a sua IA
Crie uma tela de carregamento por etapas para a geração do relatório: sobreposição desfocada com a lista de passos, ícone girando na etapa atual, confirmação nas concluídas, espera pelas tarefas reais do servidor, progresso anunciado ao leitor de tela e versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Embarque
Embarque espera uma tarefa real terminar?
Sim. Em Embarque, cada etapa pode ter duração fixa, 1,5 segundo por padrão, ou ser marcada como assíncrona: nesse caso, ela fica girando até o seu código desligar essa marcação; depois, conta a duração da etapa e avança. Os eventos de troca de etapa, de conclusão e de fechar permitem redirecionar ou mostrar o resultado no fim.
Embarque é acessível para leitor de tela?
Não por padrão. Embarque troca as etapas só visualmente, sem região ao vivo que anuncie o progresso, e o botão de fechar tem apenas um ícone, sem rótulo. Vale pedir à IA um status anunciado a cada etapa, um rótulo no botão e o foco levado para a sobreposição enquanto ela estiver aberta.
Dá para impedir que a pessoa feche Embarque?
Sim. Com a prop preventClose, Embarque esconde o botão de fechar do canto da tela, útil em pagamentos e gravações que não podem ser interrompidos. Sem ela, o botão aparece e dispara o evento close, e cabe ao seu código desligar a prop loading para encerrar a sobreposição.
