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 without any glitch)
The goal is to have a class I can add to any block and will visually look like loading/processing.
Note: no JS; pure CSS.
li {
display: inline-block;
width: calc(20px * 8); /* how to calculate this, relative to the width (of the pattern or the step), to achieve pattern continuity exactly?
Of course without doing trying&error to know it should be 24.75px * 8.
*/
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, black 10px, black 20px);
animation: loading-slide 1s linear infinite;
}
@keyframes loading-slide {
from { background-position: 0% 0% }
to { background-position: 100% 0% }
}
<ul>
<li>test
<li>test
</ul>
The correct formula should be
(20px / cos(45deg)) * N
. Then you can make thebackground-size
to be200% 100%
(twice bigger than the element) and you animate it from left to right:You can consider any degree and adjust the formula as needed.
(20px / cos(90deg - |Xdeg|)) * N
withX
between-90deg
and90deg
Example with
-60deg
Example with
30deg
Example with
80deg
You can clearly identify the trivial case where
X=+/-90deg
(vertical stripes) and we will havecos(0)=1
thus the formula will be20px * N
. Also whenX=0
(horizontal stripes) we will havecos(90deg) = 0
and any width will work since there is no vertical pattern (the formula is no more defined)What about value outside
[-90deg,90deg]
?The above range already cover
180deg
and since we are dealing with something symetric, all the value can be represented inside that range.Example:
110deg
is the same as-70deg
Example:
-150deg
is the same as30deg
basically we add/remove
180deg
until we get inside[-90deg,90deg]
in order to be able to apply the formula.Check this answer for more details about how
background-size
/background-position
works: Using percentage values with background-position on a linear-gradientAnother Approach
Here is a complete different idea where you can rely on
skew
transformation and pseudo element. The trick here is that you don't have to define the width based on the stripes but the stripes will follow the width you will define so it will be easier to handle.As you can see, we keep a vertical gradient, we define the width of the element based on the width of the gradient. We make the pseudo element big enough and we apply a translation on it. The only thing you need to adjust is the skew transformation to control the degree.
With this approach you will also have better performance since you will animate transform instead of
background-size
.More examples: