1.loader {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%,-50%);
6  overflow: hidden;
7  height: 80px;
8  width: 80px;
9  border: 1px solid transparent;
10  box-shadow: 0 0 0 2px rgb(25, 116, 253);
11  border-radius: 50%;
12}
13
14.waves {
15  position: relative;
16  width: 100%;
17  height: 100%;
18  border-radius: 50%;
19  background: rgb(30, 146, 255);
20  box-shadow: inset 0 0 50px rgb(0,0,0,.3);
21}
22
23.waves::before,
24.waves::after {
25  content: '';
26  position: absolute;
27  width: 200%;
28  height: 200%;
29  top: 0;
30  left: 50%;
31  transform: translate(-50%, -75%);
32  background: #000;
33}
34
35.waves::before {
36  border-radius: 45%;
37  background: rgb(248, 248, 248);
38  animation: wave91234 5s linear infinite;
39}
40
41.waves::after {
42  border-radius: 40%;
43  background: rgb(255,255,255,.5);
44  animation: wave91234 10s linear infinite;
45}
46
47@keyframes wave91234 {
48  0% {
49    transform: translate(-50%, -75%) rotate(0deg);
50  }
51
52  100% {
53    transform: translate(-50%, -75%) rotate(360deg);
54  }
55}