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: relative; 12 top: 0; 13 left: 50%; 14 transform: translateX(-50%); 15 margin: 3em 0; 16} 17 18.loader{ 19 width:100%; 20 height:100%; 21 transform: translateZ(0) rotate(360deg); 22 transform-origin: center center; 23 -moz-transform-origin: 50px 50px; /* firefox requires fixed values */ 24 animation: rotate 1s linear infinite; 25} 26 27.loader__path{ 28 stroke-dasharray: 80px; 29 stroke-dashoffset: 9.7px; 30 r: 16px; 31 cx: 50px; 32 cy: 50px; 33 fill: transparent; 34 stroke: $loaderColor; 35 stroke-width: 5px; 36 stroke-linecap: round; 37 transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1); 38 -webkit-animation: a 4s ease-out infinite; 39 animation: a 4s ease-out infinite; 40}