-1

minha tela de loading aparece só o icone sobre o conteúdo da tela inicial. quero adicionar uma cor solida ao fundo que desaparece junto com o icone quando o site carregar. como adiciono?

<body onload = "function()">
      <div class="load">
         <img src="images/logo-gif.gif">
      </div>

      <script type="text/javascript ">
        window.onload = function() {
            window.addEventListener("onload ", function() {
                $('.load').show();
            });
            setTimeout(function() {
                $('.load').hide();
            }, 700);
        }
     </script>
 </body>

css:

.load {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 40%;
    left: 45%;
  }

1 Resposta 1

-2

Pra isso acontecer você precisa fazer com que a classe .load esteja com width:100% e height:100vh. e com isso vc define a cor e a opacidade do fundo e a imagem centralizada.

.load {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 5s;
}

.load img {
  margin-top: 50%;
  width: 200px
}
<body onload="function()">
  <div class="load">
    <img src="https://media.tenor.com/8ZhQShCQe9UAAAAC/loader.gif">
  </div>

  <script>
    window.onload = function() {
      window.addEventListener("onload ", function() {
        $('.load').show();
      });
      setTimeout(function() {
        $('.load').hide();
      }, 700);
    }
  </script>
</body>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 20/01/2023 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .