8

Eu vi esse elemento que na verdade funciona como um "loader" enquanto a imagem vai carregando etc. E tentei replica-lo. Não a dinâmica para funcionar como um loader, mas sim esse efeito das linha passando no topo.

inserir a descrição da imagem aqui

O que eu tenho de código até o momento é isso, alinhei a barra no topo e tudo mais, mas o que eu gostaria é de colocar esse efeito de "candy bar" animado dentro da barra do topo. Como fazer essa linhas passando assim?

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-image: url(https://unsplash.it/600/300);
	background-size: cover;
}
.bar {
	position: fixed;
	top: 0;
	z-index: 1000;
	height: 10px;
	width: 100%;
	background-color: rgba(255,0,0,.25);
	border-bottom: 1px solid rgba(0,0,0,.25);
	box-shadow: inset 0 5px 5px 0 rgba(255,255,255,.25);
}
<div class="bar"></div>

2

2 Respostas 2

6

Não achei um fundo que ficasse melhor, mas ideia é essa: Usar um background animando a posição com keyframes:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-image: url(https://unsplash.it/600/300);
	background-size: cover;
}
.bar {
	position: fixed;
	top: 0;
	z-index: 1000;
	height: 10px;
	width: 100%;
	background-color: rgba(255,0,0,.25);
	border-bottom: 1px solid rgba(0,0,0,.25);
	box-shadow: inset 0 5px 5px 0 rgba(255,255,255,.25);
  background-image: url('https://images.esellerpro.com/2316/I/195/94/Black%20White%20Stripe.jpg');
  background-position: 0 -87px ;
  background-size:contain;
  animation: samba 10s infinite linear;
  opacity: .5;
  transform: skew(-37deg);
}
@keyframes samba{
0%{
background-position: 0 -87px ;
}
100%{
  background-position: 100% -87px ;
}
}
<div class="bar"></div>

2
  • Obrigado pela dica, eu estava pensando em algo com um linear-gradiente, ou repeat-linear-gradiente... Mas já é um caminho!
    – hugocsl
    30/11/2018 às 16:20
  • Opa, dá também... Acho que funciona legal. 30/11/2018 às 16:27
2

Cheguei em uma solução usando linear-gradient, a vantagem do linear-gradient é que vc não precisa usar uma imagem e seria mais fácil para editar as cores e o tamanho por exemplo. No caso da imagem ficaria mais complicado para editar a cor, tamanho, além de que será mais um requisição no servidor que pode falhar ou atrasar o carregamento etc...

A ideia da construção do gradiente é tem módulos de 10px por exemplo que se repetem no eixo X, Esse módulo de 10px é dividido pelo gradiente em etapas de 25%, de forma a ficar como na imagem abaixo.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Depois disso com o @keyframes eu mudo o background-position-x em 10px para o lado e pronto tenho o movimento.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-image: url(https://unsplash.it/600/400);
	background-size: cover;
}
.bar {
	position: fixed;
	top: 0;
	z-index: 1000;
	height: 10px;
	width: 100%;
	background-color: rgba(0,0,0,.25);
	border-bottom: 1px solid rgba(0,0,0,.25);
	box-shadow: inset 0 5px 5px 0 rgba(255,255,255,.25);
    background-image: linear-gradient(-45deg, rgba(255,255,255,.25) 25%, rgba(0,0,0,.25) 25%, rgba(0,0,0,.25) 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, rgba(0,0,0,.25) 75%);
    background-size: 10px 10px;
    background-repeat: repeat-x;
    animation: barra 250ms linear infinite;
}
@keyframes barra {
    to {
        background-position-x: 10px;
    }
}

    
<div class="bar"></div>

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 .