1.loader {
2  animation: rotate 1s infinite;
3  height: 50px;
4  width: 50px;
5}
6
7.loader:before,
8.loader:after {
9  border-radius: 50%;
10  content: '';
11  display: block;
12  height: 20px;
13  width: 20px;
14}
15
16.loader:before {
17  animation: ball1 1s infinite;
18  background-color: #cb2025;
19  box-shadow: 30px 0 0 #f8b334;
20  margin-bottom: 10px;
21}
22
23.loader:after {
24  animation: ball2 1s infinite;
25  background-color: #00a096;
26  box-shadow: 30px 0 0 #97bf0d;
27}
28
29@keyframes rotate {
30  0% {
31    -webkit-transform: rotate(0deg) scale(0.8);
32    -moz-transform: rotate(0deg) scale(0.8);
33  }
34
35  50% {
36    -webkit-transform: rotate(360deg) scale(1.2);
37    -moz-transform: rotate(360deg) scale(1.2);
38  }
39
40  100% {
41    -webkit-transform: rotate(720deg) scale(0.8);
42    -moz-transform: rotate(720deg) scale(0.8);
43  }
44}
45
46@keyframes ball1 {
47  0% {
48    box-shadow: 30px 0 0 #f8b334;
49  }
50
51  50% {
52    box-shadow: 0 0 0 #f8b334;
53    margin-bottom: 0;
54    -webkit-transform: translate(15px,15px);
55    -moz-transform: translate(15px, 15px);
56  }
57
58  100% {
59    box-shadow: 30px 0 0 #f8b334;
60    margin-bottom: 10px;
61  }
62}
63
64@keyframes ball2 {
65  0% {
66    box-shadow: 30px 0 0 #97bf0d;
67  }
68
69  50% {
70    box-shadow: 0 0 0 #97bf0d;
71    margin-top: -20px;
72    -webkit-transform: translate(15px,15px);
73    -moz-transform: translate(15px, 15px);
74  }
75
76  100% {
77    box-shadow: 30px 0 0 #97bf0d;
78    margin-top: 0;
79  }
80}