Ajax Loader
×
HTML
<ul>
1
<ul>
2
  <li></li>
3
  <li></li>
4
  <li></li>
5
  <li></li>
6
  <li></li>
7
  <li></li>
8
</ul>
 
CSS
body {
1
body {
2
  background: rgb(64, 64, 75);
3
}
4
 
5
li {
6
  top: 150px;
7
  left: -1%;
8
  position: absolute;
9
  color: rgb(64, 125, 255);
10
  animation: scrollRight 3s linear infinite;
11
}
12
 
13
@keyframes scrollRight {
14
  0% { left: -10%; opacity: .25; }
15
  10% { left: 20%; opacity: .5; }
16
  20% { left: 35%; opacity: .75; }
17
  30% { left: 45%; opacity: 1; }
18
  50% { left: 50%; }
19
  70% { left: 55%; opacity: 1; }
20
  80% { left: 65%; opacity: .75; }
21
  90% { left: 80%; opacity: .5;  }
22
  100% { left: 100%; opacity: .25; }
23
}
24
 
25
li:nth-child(2) {
26
  animation-delay: .1s
27
}
28
 
29
li:nth-child(3) {
30
  animation-delay: .2s
31
}
32
 
33
li:nth-child(4) {
34
  animation-delay: .3s
35
}
36
 
37
li:nth-child(5) {
38
  animation-delay: .4s
39
}
40
 
41
li:nth-child(6) {
42
  animation-delay: .5s
43
}
 

Untitled

CSSDeck G+