1loader-box {
2  background: #fff;
3  top: 50%;
4  left: 50%;
5  position: absolute;
6  transform: translate(-50%, -50%);
7}
8
9.loading-wrapper {
10  width: 80px;
11  height: 80px;
12  border-radius: 50%;
13}
14
15.loading-wrapper .loader {
16  height: 80px;
17  width: 80px;
18  border: 3px solid #e5e5e5;
19  border-radius: 50%;
20  -webkit-animation: pulse1572 1200ms ease-in-out;
21  animation: pulse1572 1200ms ease-in-out;
22  -webkit-animation-iteration-count: infinite;
23  animation-iteration-count: infinite;
24}
25
26.loading-wrapper .loader .loader-inner {
27  display: block;
28  height: 40px;
29  width: 40px;
30  position: absolute;
31  top: 50%;
32  left: 50%;
33  -webkit-transform: translateX(-50%) translateY(-50%);
34  transform: translateX(-50%) translateY(-50%);
35  background: linear-gradient(180deg, rgb(0, 140, 255) 0%, rgb(218, 67, 218) 100%);
36  -webkit-transform-origin: 50% 50%;
37  transform-origin: 50% 50%;
38  border-radius: 50%;
39  -webkit-animation: innerPulse934 1200ms ease-in-out;
40  animation: innerPulse934 1200ms ease-in-out;
41  -webkit-animation-iteration-count: infinite;
42  animation-iteration-count: infinite;
43  -webkit-animation-delay: 600ms;
44  animation-delay: 600ms;
45  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
46}
47
48@keyframes pulse1572 {
49  0% {
50    border: 3px solid #fff;
51  }
52
53  50% {
54    border: 40px solid #fff;
55  }
56
57  100% {
58    border: 3px solid #fff;
59  }
60}
61
62@keyframes innerPulse934 {
63  0% {
64    height: 30px;
65    width: 30px;
66  }
67
68  50% {
69    height: 53.33333px;
70    width: 53.33333px;
71  }
72
73  100% {
74    height: 30px;
75    width: 30px;
76  }
77}