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"> </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!
Deixe um comentário