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
- multi step loader
- 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 Multi Step Loader
O Multi Step Loader espera uma tarefa real terminar?
Sim. No Multi Step Loader, 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.
O Multi Step Loader é acessível para leitor de tela?
Não por padrão. O Multi Step Loader 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 o Multi Step Loader?
Sim. Com a prop preventClose, o Multi Step Loader 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.
