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