1.loader {
2 --loader: rgb(49, 180, 255);
3 --loader-size: 30px;
4 position: relative;
5 width: 100px;
6 height: 40px;
7 overflow: hidden;
8 transition: .5s;
9 letter-spacing: 2px
10}
11
12.loader span {
13 position: absolute;
14}
15
16.loader span:nth-child(1) {
17 top: 0;
18 left: -100%;
19 width: 100%;
20 height: var(--loader-size);
21 background: linear-gradient(90deg, transparent, var(--loader));
22 animation: loader-anim1 1s linear infinite;
23}
24
25@keyframes loader-anim1 {
26 0% {
27  left: -100%;
28 }
29
30 50%,100% {
31  left: 100%;
32 }
33}
34
35.loader  span:nth-child(2) {
36 top: -100%;
37 right: 0;
38 width: var(--loader-size);
39 height: 100%;
40 background: linear-gradient(180deg, transparent, var(--loader));
41 animation: loader-anim2 1s linear infinite;
42 animation-delay: .25s
43}
44
45@keyframes loader-anim2 {
46 0% {
47  top: -100%;
48 }
49
50 50%,100% {
51  top: 100%;
52 }
53}
54
55.loader span:nth-child(3) {
56 bottom: 0;
57 right: -100%;
58 width: 100%;
59 height: var(--loader-size);
60 background: linear-gradient(270deg, transparent, var(--loader));
61 animation: loader-anim3 1s linear infinite;
62 animation-delay: .5s
63}
64
65@keyframes loader-anim3 {
66 0% {
67  right: -100%;
68 }
69
70 50%,100% {
71  right: 100%;
72 }
73}
74
75.loader span:nth-child(4) {
76 bottom: -100%;
77 left: 0;
78 width: var(--loader-size);
79 height: 100%;
80 background: linear-gradient(360deg, transparent, var(--loader));
81 animation: loader-anim4 1s linear infinite;
82 animation-delay: .75s
83}
84
85@keyframes loader-anim4 {
86 0% {
87  bottom: -100%;
88 }
89
90 50%,100% {
91  bottom: 100%;
92 }
93}