animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

css loader

1html {
2  height: 100%;
3  
4  background-color: indianred;
5  
6  background-image:
7    linear-gradient(white,white),
8    linear-gradient(white,white),
9    linear-gradient(white,white),
10    linear-gradient(white,white),
11    linear-gradient(white,white),
12    linear-gradient(white,white),
13    linear-gradient(white,white);
14  
15  background-position: 
16    calc(50% - 30px) 50%,
17    calc(50% - 20px) 50%,
18    calc(50% - 10px) 50%,
19    50% 50%,
20    calc(50% + 10px) 50%,
21    calc(50% + 20px) 50%,
22    calc(50% + 30px) 50%;
23  
24  background-size: 
25    5px 10px,
26    5px 10px,
27    5px 10px,
28    5px 10px,
29    5px 10px,
30    5px 10px,
31    5px 10px;
32  background-repeat: no-repeat;
33  
34  animation: l-bars 1s linear infinite alternate;
35  }
36
37@keyframes l-bars {
38  0% {  
39    background-size: 
40      5px 30px,
41      5px 10px,
42      5px 10px,
43      5px 10px,
44      5px 10px,
45      5px 10px,
46      5px 10px;
47    }
48  16.6% {  
49    background-size: 
50      5px 10px,
51      5px 40px,
52      5px 10px,
53      5px 10px,
54      5px 10px,
55      5px 10px,
56      5px 10px;
57    }
58  33.2% {  
59    background-size: 
60      5px 10px,
61      5px 10px,
62      5px 40px,
63      5px 10px,
64      5px 10px,
65      5px 10px,
66      5px 10px;
67    }
68  49.8% {  
69    background-size: 
70      5px 10px,
71      5px 10px,
72      5px 10px,
73      5px 40px,
74      5px 10px,
75      5px 10px,
76      5px 10px;
77    }
78  66.4% {  
79    background-size: 
80      5px 10px,
81      5px 10px,
82      5px 10px,
83      5px 10px,
84      5px 40px,
85      5px 10px,
86      5px 10px;
87    }
88  83% {  
89    background-size: 
90      5px 10px,
91      5px 10px,
92      5px 10px,
93      5px 10px,
94      5px 10px,
95      5px 40px,
96      5px 10px;
97    }
98  100% {  
99    background-size: 
100      5px 10px,
101      5px 10px,
102      5px 10px,
103      5px 10px,
104      5px 10px,
105      5px 10px,
106      5px 40px;
107    }
108  }