Loader by csemszepp

1.loader {
2  animation: spin 1.5s linear alternate infinite;
3  background: #B73F41;
4  border-radius: 50%;
5  height: 120px;
6  width: 120px;
7}
8
9.loader:before {
10  background: #B73F41;
11  border-radius: 50%;
12  content: '';
13  display: block;
14  height: 0.5em;
15  width: 0.5em;
16  z-index: 2;
17}
18
19.loader:after {
20  background: #262E2A;
21  border-radius: 50%;
22  box-shadow: 0em -2.60em #262E2A,
23    2.25em -4.02em #e5e7eb,
24    2.25em -1.25em #262E2A,
25    4.60em 0em #e5e7eb,
26    2.25em 1.25em #262E2A,
27    2.25em 4.02em #e5e7eb,
28    0em 2.60em #262E2A,
29    -2.25em 4.02em #e5e7eb,
30    -2.25em 1.25em #262E2A,
31    -4.60em 0em #e5e7eb,
32    -2.25em -1.25em #262E2A,
33    -2.25em -4.02em #e5e7eb;
34  content: '';
35  display: block;
36  height: 2em;
37  width: 2em;
38}
39
40.inner {
41  animation: load 1.5s linear alternate infinite;
42  border: solid 1px #B73F41;
43  border-radius: 50%;
44  height: 1.75em;
45  width: 1.75em;
46  z-index: 1;
47}
48
49.loader, .loader:before, .loader:after, .inner {
50  bottom: 0;
51  left: 0;
52  margin: auto;
53  position: absolute;
54  right: 0;
55  top: 0;
56}
57
58@keyframes load {
59  0% {
60    box-shadow: 0em -2.60em #262E2A,
61      2.25em -1.25em #262E2A,
62      2.25em 1.25em #262E2A,
63      0em 2.60em #262E2A,
64      -2.25em 1.25em #262E2A,
65      -2.25em -1.25em #262E2A;
66  }
67
68  15% {
69    box-shadow: 0em -2.60em #262E2A,
70      2.25em -1.25em #262E2A,
71      2.25em 1.25em #262E2A,
72      0em 2.60em #262E2A,
73      -2.25em 1.25em #262E2A,
74      -2.25em -1.25em #B73F41;
75  }
76
77  30% {
78    box-shadow: 0em -2.60em #262E2A,
79      2.25em -1.25em #262E2A,
80      2.25em 1.25em #262E2A,
81      0em 2.60em #262E2A,
82      -2.25em 1.25em #B73F41,
83      -2.25em -1.25em #B73F41;
84  }
85
86  45% {
87    box-shadow: 0em -2.60em #262E2A,
88      2.25em -1.25em #262E2A,
89      2.25em 1.25em #262E2A,
90      0em 2.60em #B73F41,
91      -2.25em 1.25em #B73F41,
92      -2.25em -1.25em #B73F41;
93  }
94
95  60% {
96    box-shadow: 0em -2.60em #262E2A,
97      2.25em -1.25em #262E2A,
98      2.25em 1.25em #B73F41,
99      0em 2.60em #B73F41,
100      -2.25em 1.25em #B73F41,
101      -2.25em -1.25em #B73F41;
102  }
103
104  75% {
105    box-shadow: 0em -2.60em #262E2A,
106      2.25em -1.25em #B73F41,
107      2.25em 1.25em #B73F41,
108      0em 2.60em #B73F41,
109      -2.25em 1.25em #B73F41,
110      -2.25em -1.25em #B73F41;
111  }
112
113  90% {
114    box-shadow: 0em -2.60em #B73F41,
115      2.25em -1.25em #B73F41,
116      2.25em 1.25em #B73F41,
117      0em 2.60em #B73F41,
118      -2.25em 1.25em #B73F41,
119      -2.25em -1.25em #B73F41;
120  }
121
122  100% {
123    box-shadow: 0em -2.60em #B73F41,
124      2.25em -1.25em #B73F41,
125      2.25em 1.25em #B73F41,
126      0em 2.60em #B73F41,
127      -2.25em 1.25em #B73F41,
128      -2.25em -1.25em #B73F41;
129  }
130}
131
132@keyframes spin {
133  0% {
134    transform: rotate(0deg);
135  }
136
137  15% {
138    transform: rotate(60deg);
139  }
140
141  30% {
142    transform: rotate(120deg);
143  }
144
145  45% {
146    transform: rotate(180deg);
147  }
148
149  60% {
150    transform: rotate(240deg);
151  }
152
153  75% {
154    transform: rotate(300deg);
155  }
156
157  90% {
158    transform: rotate(360deg);
159  }
160
161  100% {
162    transform: rotate(0deg);
163  }
164}