# Multi Step Loader Tela de espera que lista as etapas de um processo e marca cada uma como concluída enquanto avança. > O Multi Step Loader é um componente do THM Componentes que cobre a tela durante processos demorados e mostra a lista de etapas: o ícone da etapa atual gira, as concluídas ganham um sinal de confirmado e a lista sobe a cada passo. Cada etapa pode durar um tempo fixo ou esperar uma tarefa assíncrona terminar, como gerar um relatório. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/multi-step-loader/ ## 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 ```text 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. ## Componentes relacionados - [Agent Trace](https://vibecode.thmtecnologia.com/componentes/agent-trace/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Animated Circular Progress Bar](https://vibecode.thmtecnologia.com/componentes/animated-circular-progressbar/): Um anel que se preenche com animação até a porcentagem da meta, com o número no centro. - [Animated Modal](https://vibecode.thmtecnologia.com/componentes/animated-modal/): Janela que se levanta da tela com um giro em 3D e um leve quique, sobre um fundo escurecido e desfocado. - [Animated List](https://vibecode.thmtecnologia.com/componentes/animated-list/): Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo. - [Toast Stack](https://vibecode.thmtecnologia.com/componentes/toast-stack/): Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.