1.loader {
2  position: absolute;
3  width: 54px;
4  height: 54px;
5  margin: 0 40%;
6  border-radius: 10px;
7}
8
9.loader div {
10  width: 8%;
11  height: 24%;
12  background: rgb(128, 128, 128);
13  position: absolute;
14  left: 50%;
15  top: 30%;
16  opacity: 0;
17  border-radius: 50px;
18  box-shadow: 0 0 3px rgba(0,0,0,0.2);
19  animation: fade458 1s linear infinite;
20}
21
22@keyframes fade458 {
23  from {
24    opacity: 1;
25  }
26
27  to {
28    opacity: 0.25;
29  }
30}
31
32.loader .bar1 {
33  transform: rotate(0deg) translate(0, -130%);
34  animation-delay: 0s;
35}
36
37.loader .bar2 {
38  transform: rotate(30deg) translate(0, -130%);
39  animation-delay: -1.1s;
40}
41
42.loader .bar3 {
43  transform: rotate(60deg) translate(0, -130%);
44  animation-delay: -1s;
45}
46
47.loader .bar4 {
48  transform: rotate(90deg) translate(0, -130%);
49  animation-delay: -0.9s;
50}
51
52.loader .bar5 {
53  transform: rotate(120deg) translate(0, -130%);
54  animation-delay: -0.8s;
55}
56
57.loader .bar6 {
58  transform: rotate(150deg) translate(0, -130%);
59  animation-delay: -0.7s;
60}
61
62.loader .bar7 {
63  transform: rotate(180deg) translate(0, -130%);
64  animation-delay: -0.6s;
65}
66
67.loader .bar8 {
68  transform: rotate(210deg) translate(0, -130%);
69  animation-delay: -0.5s;
70}
71
72.loader .bar9 {
73  transform: rotate(240deg) translate(0, -130%);
74  animation-delay: -0.4s;
75}
76
77.loader .bar10 {
78  transform: rotate(270deg) translate(0, -130%);
79  animation-delay: -0.3s;
80}
81
82.loader .bar11 {
83  transform: rotate(300deg) translate(0, -130%);
84  animation-delay: -0.2s;
85}
86
87.loader .bar12 {
88  transform: rotate(330deg) translate(0, -130%);
89  animation-delay: -0.1s;
90}
91