Loader by Gautammsharma

1.loader-container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  height: 20em;
6}
7
8.loader {
9  position: relative;
10  width: 3em;
11  height: 3em;
12  border-radius: 50%;
13  background-color: rgb(208, 208, 208);
14  box-shadow: 0 0em 4em rgba(23, 190, 250, 0.5);
15  animation: loader-rotate 1s linear infinite;
16}
17
18.loader::before,
19.loader::after {
20  content: "";
21  position: absolute;
22  top: 0;
23  left: 0;
24  width: 100%;
25  height: 100%;
26  border-radius: 50%;
27  border: 1em solid rgba(0, 0, 0, 0.1);
28  box-sizing: border-box;
29}
30
31.loader::before {
32  animation: loader-pulse 1s ease-out infinite;
33}
34
35.loader::after {
36  animation: loader-pulse 1s ease-out infinite 0.5s;
37}
38
39@keyframes loader-rotate {
40  0% {
41    transform: rotate(0);
42  }
43
44  100% {
45    transform: rotate(360deg);
46  }
47}
48
49@keyframes loader-pulse {
50  0% {
51    transform: scale(1);
52    opacity: 1;
53  }
54
55  50% {
56    transform: scale(1.5);
57    opacity: 0.5;
58  }
59
60  100% {
61    transform: scale(1);
62    opacity: 1;
63  }
64}
65