Loader by SmartegaAgency

1.loader {
2  width: 0;
3  height: 4.8px;
4  display: inline-block;
5  position: relative;
6  background: #54f98d;
7  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
8  box-sizing: border-box;
9  animation: animFw 8s linear infinite;
10}
11
12.loader::after,
13.loader::before {
14  content: "";
15  width: 10px;
16  height: 1px;
17  background: #fff;
18  position: absolute;
19  top: 9px;
20  right: -2px;
21  opacity: 0;
22  transform: rotate(-45deg) translateX(0px);
23  box-sizing: border-box;
24  animation: coli1 0.3s linear infinite;
25}
26
27.loader::before {
28  top: -4px;
29  transform: rotate(45deg);
30  animation: coli2 0.3s linear infinite;
31}
32
33@keyframes animFw {
34  0% {
35    width: 0;
36  }
37
38  100% {
39    width: 100%;
40  }
41}
42
43@keyframes coli1 {
44  0% {
45    transform: rotate(-45deg) translateX(0px);
46    opacity: 0.7;
47  }
48
49  100% {
50    transform: rotate(-45deg) translateX(-45px);
51    opacity: 0;
52  }
53}
54
55@keyframes coli2 {
56  0% {
57    transform: rotate(45deg) translateX(0px);
58    opacity: 1;
59  }
60
61  100% {
62    transform: rotate(45deg) translateX(-45px);
63    opacity: 0.7;
64  }
65}
66