Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Desafio Implementação do Loader - Ui para Devs - construindo interfces animadas

Referente ao curso UI para devs: construindo interfaces animadas, no capítulo Implementando animações no projeto e atividade Desafio: implementação do loader

por JOÃO ZANATA NETO
| 71.3k xp | 32 posts

Criei o loader.css conforme instruções. Depois, no sacola.html, inseri na tag body um onload="carregando()". Logo antes do fechamento do body, inseri um script com a função carregando que atribui à constante carregar a classe loader da animaçã e fiz uso do setTimeout para remover a const carregar depois de 3 segundos.
A implementação funciona, mas a página itens da sacola carrega antes da animação de tal forma que precisei colocar um z-index:1 na animação.
A pergunta que faço é se é possível mostrar a animação antes do carregamento da tela usando uma classe no body com display none ou fazer uso de um modal ou outro recurso que desconheço?
Mai detalhes no github.com/JZanataNeto.

2 respostas
solução!
por NATHALIA QUEIROZ
| 3141.6k xp | 7279 posts
Alura Scuba Team

Ei, João! Tudo bem?

A questão que você levantou sobre a animação aparecer antes do carregamento da tela pode ser resolvida de algumas maneiras.

Uma abordagem comum é utilizar um overlay ou modal que cubra toda a tela enquanto a animação de carregamento é exibida. Isso pode ser feito adicionando uma classe ao elemento <body> que oculta o conteúdo principal da página até que o carregamento seja concluído.

Segue um exemplo para você testar:

  1. No CSS, crie uma classe para o overlay que cubra toda a tela e posicione o loader no centro.

    .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Certifique-se de que está acima de outros elementos */
}

.hidden {
    display: none;
}

  2. No HTML, adicione o overlay no seu HTML.

    <div id="loader" class="overlay">
    <!-- Sua animação de loader aqui -->
</div>

  3. No javascript em sacola.html, modifique a função carregando() para esconder o overlay após 3 segundos.

    function carregando() {
    const loader = document.getElementById('loader');
    setTimeout(() => {
        loader.classList.add('hidden');
    }, 3000);
}

Espero ter ajudado e qualquer dúvida, compartilhe no fórum.

Até mais, João!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado!

por JOÃO ZANATA NETO
| 71.3k xp | 32 posts

Funcionou corretamente, muito obrigado :)