Loader by Alderx

1/* heart beat */
2.heartbeatloader {
3  position: absolute;
4  width: 10vmin;
5  height: 10vmin;
6  z-index: -2;
7  margin: auto;
8  top: 0;
9  left: 0;
10  right: 0;
11  bottom: 0;
12}
13
14.svgdraw {
15  top: 30%;
16  left: 26%;
17  position: absolute;
18  width: 50%;
19  height: 50%;
20  color: #fff;
21  transform: scale(1.4);
22  z-index: 3;
23}
24
25.path {
26  stroke: rgba(255, 255, 255, 0.95);
27  stroke-width: 4;
28  stroke-dasharray: 1000px;
29  stroke-dashoffset: 1000px;
30  animation: draw 1.5s infinite forwards normal linear;
31  animation-delay: 0.1s;
32  position: relative;
33}
34
35@keyframes draw {
36  to {
37    stroke-dashoffset: 0;
38  }
39}
40
41.innercircle {
42  position: absolute;
43  top: 17%;
44  left: 100.5%;
45  transform: translate(-50%, -50%) scale(1.2);
46  width: 160%;
47  height: auto;
48  z-index: 1;
49  opacity: 0.97;
50  animation: innerbeat 1.5s infinite linear forwards;
51}
52
53.innercircle:before,
54.innercircle:after {
55  position: absolute;
56  content: "";
57  left: 25%;
58  top: 0;
59  width: 25%;
60  height: auto;
61  padding-bottom: 40%;
62  background: rgb(225, 95, 95);
63  border-radius: 50px 50px 0 0;
64  transform: rotate(-45deg);
65  transform-origin: 0 100%;
66}
67
68.innercircle:after {
69  left: 0;
70  transform: rotate(45deg);
71  transform-origin: 100% 100%;
72}
73
74@keyframes innerbeat {
75  0% {
76    transform: translate(-50%, -50%) scale(1.2);
77  }
78
79  10% {
80    transform: translate(-50%, -50%) scale(1.2);
81  }
82
83  50% {
84    transform: translate(-50%, -50%) scale(1.3);
85  }
86
87  60% {
88    transform: translate(-50%, -50%) scale(1.25);
89  }
90
91  75% {
92    transform: translate(-50%, -50%) scale(1.3);
93  }
94}
95
96.outercircle {
97  width: 100%;
98  height: 100%;
99  border-radius: 50%;
100  background-color: rgba(238, 92, 92, 0.9);
101  box-shadow: 0 0 30px 0px #fff;
102  position: absolute;
103  z-index: -1;
104  opacity: 0.7;
105  top: 0;
106  left: 0;
107  transform: scale(1.2);
108  animation: outerbeat 1.5s infinite linear forwards;
109}
110
111@keyframes outerbeat {
112  0% {
113    transform: scale(1.2);
114  }
115
116  10% {
117    transform: scale(1.2);
118  }
119
120  50% {
121    transform: scale(1.3);
122  }
123
124  60% {
125    transform: scale(1.25);
126  }
127
128  75% {
129    transform: scale(1.3);
130  }
131}