Tela de Carregamento com Css Efeito Borboleta

Tela de Carregamento com Css Efeito Borboleta

Tela de Carregamento com CSS: Efeito Borboleta para Aprimorar a Experiência do Usuário

As telas de carregamento são elementos essenciais em websites e aplicativos, mas muitas vezes são subestimadas em termos de design e experiência do usuário. Uma tela de carregamento bem projetada pode manter os usuários engajados e reduzir a frustração enquanto esperam pelo conteúdo.

O efeito borboleta é uma técnica de animação CSS elegante e sutil que pode ser usada para criar telas de carregamento atraentes e memoráveis. Inspirada na natureza, a animação imita o movimento de uma borboleta batendo suas asas, criando uma sensação de movimento e dinamismo.

Implementando o Efeito Borboleta em CSS

Criar o efeito borboleta em CSS é relativamente simples e pode ser feito com poucas linhas de código. Aqui está um exemplo básico:

div#preloader {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 99999;

}

.loader-box .title {

  color: #525866;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: lighter;
  text-align: center;

}

.loader-box {

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:-50px; 
  margin-left:-50px;

}

/*Loading*/

.loader {
  width: 30px;
  height: 30px;
  position: relative;
  margin: auto;
}
.loader::before, .loader::after {
  content: "";
  position: absolute;
}
.loader-list {
  display: grid;
  grid-template: repeat(3, 120px)/repeat(3, 120px);
  grid-gap: 30px;
}
.loader-item {
  display: flex;
  background: transparent;
}
.loader-2 {
  perspective: 500px;
  transform-style: preserve-3d;
  transform: rotate3d(2, 1, -1, 90deg);
}
.loader-2::before, .loader-2::after {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  background: #ff097c;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-2::before {
  left: 0;
  opacity: 0.7;
  border-top-right-radius: 0;
  transform-origin: right top;
  -webkit-animation-name: flapL;
          animation-name: flapL;
}
.loader-2::after {
  left: 50%;
  opacity: 0.5;
  border-top-left-radius: 0;
  transform-origin: left top;
  -webkit-animation-name: flapR;
          animation-name: flapR;
}

@-webkit-keyframes flapL {
  25%, 50% {
    transform: rotateY(-45deg);
  }
  12.5%, 37.5%, 65% {
    transform: rotateY(45deg);
  }
  0%, 100% {
    transform: rotateY(-30deg);
  }
}

@keyframes flapL {
  25%, 50% {
    transform: rotateY(-45deg);
  }
  12.5%, 37.5%, 65% {
    transform: rotateY(45deg);
  }
  0%, 100% {
    transform: rotateY(-30deg);
  }
}
@-webkit-keyframes flapR {
  25%, 50% {
    transform: rotateY(45deg);
  }
  12.5%, 37.5%, 65% {
    transform: rotateY(-45deg);
  }
  0%, 100% {
    transform: rotateY(30deg);
  }
}
@keyframes flapR {
  25%, 50% {
    transform: rotateY(45deg);
  }
  12.5%, 37.5%, 65% {
    transform: rotateY(-45deg);
  }
  0%, 100% {
    transform: rotateY(30deg);
  }
}

Este código cria um carregador de borboleta simples com duas formas circulares que giram em direções opostas. Você pode personalizar o tamanho, cor e animação para atender às suas necessidades específicas.

Estrutura HTML: Crie um elemento HTML para representar a tela de carregamento, como <div> ou <span>. Dentro deste elemento, inclua um elemento <span> para cada borboleta que deseja animar.

    <!--PreLoader-->
    <div id="preloader">
            
        <div id="status">&nbsp;</div>
        <div class="loader-box">

            <div class="loader-item">
                <div class="loader loader-2"></div>
            </div>
            
            <span class="title">Carregando...</span>

        </div>

    </div>
    <!--PreLoader-->

Aprimorando o Efeito Borboleta

Existem muitas maneiras de aprimorar o efeito borboleta e torná-lo ainda mais atraente. Aqui estão algumas ideias:

• Use cores gradientes para criar um efeito mais dinâmico.
• Adicione sombras para dar profundidade à animação.
• Combine o efeito borboleta com outras animações CSS para criar uma experiência mais complexa.
• Use JavaScript para controlar a animação e torná-la mais interativa.

Benefícios do Efeito Borboleta

O uso do efeito borboleta em telas de carregamento oferece vários benefícios:

• Melhora a experiência do usuário: Uma tela de carregamento atraente e interessante pode ajudar a manter os usuários engajados e reduzir a frustração enquanto esperam pelo conteúdo.
• Comunica profissionalismo: Um design bem cuidado demonstra atenção aos detalhes e profissionalismo.
• Aumenta o reconhecimento da marca: Uma tela de carregamento exclusiva pode ajudar a aumentar o reconhecimento da marca e tornar seu website ou aplicativo mais memorável.

Vamos adicionar o script para Garantir que todo o site esteja carregado e chamar as divs css com efeito borboleta.

<script src="js/jquery.js"></script>
<script type="text/javascript">

    $(window).load(function() { //Garante que todo o site esteja carregado
      $('#status').fadeOut(); //Primeiro irá desaparecer a animação de carregamento
      $('#preloader').delay(350).fadeOut('slow'); //irá esmaecer o DIV branco que cobre o site.
      $('body').delay(350).css({'overflow':'visible'});
    })

</script>

Conclusão

O efeito borboleta é uma técnica de animação CSS versátil e elegante que pode ser usada para criar telas de carregamento atraentes e envolventes. Ao implementar o efeito de forma criativa e eficaz, você pode melhorar a experiência do usuário, comunicar profissionalismo e aumentar o reconhecimento da marca.

Veja o Resultado baixo!

Tela de Carregamento com Css

Baixar Código Veja Funcionando