1.loader {
2 position: relative;
3 width: 2.5em;
4 height: 2.5em;
5 transform: rotate(165deg);
6}
7
8.loader:before, .loader:after {
9 content: "";
10 position: absolute;
11 top: 50%;
12 left: 50%;
13 display: block;
14 width: 0.5em;
15 height: 0.5em;
16 border-radius: 0.25em;
17 transform: translate(-50%, -50%);
18}
19
20.loader:before {
21 animation: before8 2s infinite;
22}
23
24.loader:after {
25 animation: after6 2s infinite;
26}
27
28@keyframes before8 {
29 0% {
30  width: 0.5em;
31  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
32 }
33
34 35% {
35  width: 2.5em;
36  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
37 }
38
39 70% {
40  width: 0.5em;
41  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
42 }
43
44 100% {
45  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
46 }
47}
48
49@keyframes after6 {
50 0% {
51  height: 0.5em;
52  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
53 }
54
55 35% {
56  height: 2.5em;
57  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
58 }
59
60 70% {
61  height: 0.5em;
62  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
63 }
64
65 100% {
66  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
67 }
68}
69
70.loader {
71 position: absolute;
72 top: calc(50% - 1.25em);
73 left: calc(50% - 1.25em);
74}