How to do with CSS Downloader bar with animated background?

Question

I saw this element that actually works as a "Loader" while the image is loading etc. And I tried to replicate it. Not the dynamics to function as a Loader, but yes this effect of the passing lines at the top.

What I have to code so far is this, I lined up the bar at the top and everything, but what I’d like is to put this effect of "Candy bar" animated inside the top bar. How to make these passing lines like this?

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>

Answer 1

I couldn’t find a better fund, but here’s the idea: Use a background animating position with 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>

Answer 2

I came up with a solution using linear-gradient, the advantage of linear-gradient is that you don’t need to use an image and it would be easier to edit the colors and size for example. In case the image would be more complicated to edit the color, size, plus it will be another request on the server that may fail or delay loading etc...

The idea of the gradient construction is to have modules of 10px for example that repeat in the X axis, This module of 10px is divided by the gradient in steps of 25%, in order to stay as in the image below.

After that with the @keyframes I change the background-position-x in 10px to the side and ready I have the movement.

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>