1.loader {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 100%;
7  max-width: 6rem;
8  margin-top: 3rem;
9  margin-bottom: 3rem;
10}
11
12.loader:before,
13  .loader:after {
14  content: "";
15  position: absolute;
16  border-radius: 50%;
17  animation: pulsOut 1.8s ease-in-out infinite;
18  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
19}
20
21.loader:before {
22  width: 100%;
23  padding-bottom: 100%;
24  box-shadow: inset 0 0 0 1rem #fff;
25  animation-name: pulsIn;
26}
27
28.loader:after {
29  width: calc(100% - 2rem);
30  padding-bottom: calc(100% - 2rem);
31  box-shadow: 0 0 0 0 #fff;
32}
33
34@keyframes pulsIn {
35  0% {
36    box-shadow: inset 0 0 0 1rem #fff;
37    opacity: 1;
38  }
39
40  50%, 100% {
41    box-shadow: inset 0 0 0 0 #fff;
42    opacity: 0;
43  }
44}
45
46@keyframes pulsOut {
47  0%, 50% {
48    box-shadow: 0 0 0 0 #fff;
49    opacity: 0;
50  }
51
52  100% {
53    box-shadow: 0 0 0 1rem #fff;
54    opacity: 1;
55  }
56}
57