1.loader {
2  display: inline-block;
3  position: relative;
4  width: 80px;
5  height: 80px;
6}
7
8.loader .loader_item {
9  transform-origin: 40px 40px;
10  animation: spinner 1.2s linear infinite;
11}
12
13.loader .loader_item:after {
14  content: " ";
15  display: block;
16  position: absolute;
17  top: 3px;
18  left: 37px;
19  width: 6px;
20  height: 18px;
21  border-radius: 20%;
22  /* try any color u want (yellow, red, lightskyblue ect...) */
23  background: green;
24}
25
26.loader .loader_item:nth-child(1) {
27  transform: rotate(0deg);
28  animation-delay: -1.1s;
29}
30
31.loader .loader_item:nth-child(2) {
32  transform: rotate(30deg);
33  animation-delay: -1s;
34}
35
36.loader .loader_item:nth-child(3) {
37  transform: rotate(60deg);
38  animation-delay: -0.9s;
39}
40
41.loader .loader_item:nth-child(4) {
42  transform: rotate(90deg);
43  animation-delay: -0.8s;
44}
45
46.loader .loader_item:nth-child(5) {
47  transform: rotate(120deg);
48  animation-delay: -0.7s;
49}
50
51.loader .loader_item:nth-child(6) {
52  transform: rotate(150deg);
53  animation-delay: -0.6s;
54}
55
56.loader .loader_item:nth-child(7) {
57  transform: rotate(180deg);
58  animation-delay: -0.5s;
59}
60
61.loader .loader_item:nth-child(8) {
62  transform: rotate(210deg);
63  animation-delay: -0.4s;
64}
65
66.loader .loader_item:nth-child(9) {
67  transform: rotate(240deg);
68  animation-delay: -0.3s;
69}
70
71.loader .loader_item:nth-child(10) {
72  transform: rotate(270deg);
73  animation-delay: -0.2s;
74}
75
76.loader .loader_item:nth-child(11) {
77  transform: rotate(300deg);
78  animation-delay: -0.1s;
79}
80
81.loader .loader_item:nth-child(12) {
82  transform: rotate(330deg);
83  animation-delay: 0s;
84}
85
86@keyframes spinner {
87  0% {
88    opacity: 1;
89    filter: hue-rotate(0deg);
90  }
91
92  100% {
93    opacity: 0;
94    filter: hue-rotate(360deg);
95  }
96}