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