1// Loader
2
3@keyframes rotate {
4  0% {  transform: rotate(0deg);}
5  100% {  transform: rotate(360deg);}
6}
7
8.loader__wrapper {
9  width: 115px;
10  height: 115px;
11  position: fixed;
12  top: 50%;
13  left: 50%;
14  transform: translate(-50%, -50%);
15  margin: 3em 0;
16  z-index: 91;
17}
18
19.loader{
20  width:100%;
21  height:100%;
22  transform: translateZ(0) rotate(360deg);
23  transform-origin: center center;
24  -moz-transform-origin: center center; /* firefox requires fixed values */
25  animation: rotate 1s linear infinite;
26}
27
28.loader__path{
29  stroke-dasharray: 80px;
30  stroke-dashoffset: 9.7px;
31  r: 16px;
32  cx: 50px;
33  cy: 50px;
34  fill: transparent;
35  stroke: $loaderColor;
36  stroke-width: 5px;
37  stroke-linecap: round;
38  transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
39  -webkit-animation: a 4s ease-out infinite;
40  animation: a 4s ease-out infinite;
41}
42
43.loader__overlay {
44  display: block;
45  position: fixed;
46  top: 0;
47  left: 0;
48  background: #fefefe;
49  height: 100%;
50  z-index: 90;
51  opacity: .7;
52  width: 100%;
53  -webkit-animation: fade 1s ease-in;
54}