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.
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>