repeating-linear-gradient

问题 I tried to make some square background using CSS only, but i got just line background without the option of horizontal lines. This is my example code: .container{ background-color:red; width: 400px; height:200px; margin:0 auto; background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%), linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%); background-size: 100px 100%; } <div class="container"> </div> And this is the result that I am looking for This is

问题 I am trying to create an animated repeating-pattern (diagonal stripes sliding horizontally), as placeholder for a loading block ( li in this case). How can I make the animation smooth/continuous giving the illusion the pattern is infinitely sliding? How to calculate the element width so that the pattern is continuous? (stripes shouldn't look broken/interrupted). How to make it loop looking like it is not restarting but rather sliding infinitely? (the 100% frame should pass to the 0% frame