Tem uma forma diferente de fazer usando linear-gradiente
, assim não precisa de mais do que uma tag ou de usar pseudo-elemento.
Imagine que vc tem um gradiente linear como background
de um container, e que esse gradiente é dividido igualmente com 50% da largura com uma cor e os outros 50% com outra cor.
Agora com o background-size
vc coloca esse background
com 200% do width
do container. Dessa forma cada metade do gradiente agora ocupa 100% da largura do container.
Agora com background-position
e o @keyframes
fazemos o background
andar 100% para um lado, mostrando 100% da outra cor que estava "escondida" fora do container.
A animação
Sobre a propriedade animation
ela é composta da seguinte maneira no shorthand:
animation: name duration timing-function delay iteration-count direction fill-mode;
Ou no Longhand (valores initial
)
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
No seu caso vc precisa focar no name
(nome da animação declarado no @keyframes
), duration
(tem que vc quer que dure a animação 6s) e iteration-count
(quantas vezes a animação vai se repetir infinite
"loop eterno") Nessa documentação da Mozilla vc pode se informar mais: https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation
Depois de definido isso vamos trabalha nos intervalos da animação construídos dentro da at-rule @keyframes
. Como eu quer que vc tenha primeiro um intervalo de 1s para ver a barra 100% vazia no início e depois um intervalo de 1s para vc ver a barra 100% completa no final eu vou repetir alguns valores no início e no final do @keyframes
Os comentário está no código abaixo:
OBS: como a animação tem 6 segundo vou dividir 100 por 6, assim temos 6 intervalos de 16,66% representando cada segundo de animação. No primeiro segundo e no último segundo a barra fica parada por 1 segundo. Se vc não quiser esse efeito basta colocar dessa forma. Assim a barra completa direto, sem um "delay" no inicio e no final pra vc ver os dois estados completos da barra:
/* estado inicial da barra */
0% {
background-position: 99% 0;
}
/* estado final da barra */
100% {
background-position: 0 0;
}
Para entende melhor como funciona o fracionamento da animação e a criação desse "delay" veja os comentário que deixei no código abaixo:
.barra {
height: 16px;
width: 50%;
border-radius: 8px;
margin: 10px auto;
/* gradiente com 2 cores */
background-image: linear-gradient(to right, #bada55 0, #bada55 50%, gray 50%);
/* agradiente com 200% da largura do container 101% pra cada cor */
background-size: 202% 100%;
/* move o backgrount para mostrar apenas a primeira cor */
background-position: 99% 0;
/* animação que move o background para mostrar a segunda cor */
animation: anima 6s ease-in-out infinite;
/* coloquei 500ms de delay para vc poder ver a barra 100% "vazia" antes de iniciar a animação */
}
@keyframes anima {
0% {
/* movemo o background para mostrar apenas 100% de uma cor */
background-position: 99% 0;
}
/* do 0% do tempo da animação até 16,66% do tempo a barra permance parada */
16.66% {
background-position: 99% 0;
}
/* esse intervalo representa 4 segundos do tempo da animação até a barra fica 100% cheia */
83.34% {
background-position: 0 0;
}
/* esse intervalo de 83,34% a 100% representa 1 segundo da animação e a barra fica cheia por 1s antes de reiniciar*/
100% {
/* de 75% a 100% eu repito o estado da propriedade para vc ter um tempo de ver a barra 100% completa antes de reiniciar a animação */
background-position: 0 0;
}
}
<div class="barra"></div>
Uma imagem para explicar melhor a técnica.
A borda azul é o container, e o fundo se movendo é o background
. O background
tem 200% a largura do pai, assim cada cor que tem 50% do gradiente na verdade fica com 100% da largura do pai. Depois ajustando o valor horizontal do background-position
no @keyframes
é possível fazer o barra mexendo, dando a impressão que está completando o container.
Suporte dos browser: De acordo com o site https://caniuse.com/ esse modelo funciona do IE10 para cima, Chrome, Fire Fox, Safari, etc...