// Loader Spinner @keyframes rotate { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } .loader__wrapper { width: 115px; height: 115px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 3em 0; z-index: 91; } .icon__loader { width:100%; height:100%; transform: translateZ(0) rotate(360deg); transform-origin: center center; -moz-transform-origin: center center; /* firefox requires fixed values */ animation: rotate 1s linear infinite; svg circle { stroke-dasharray: 80px; stroke-dashoffset: 9.7px; fill: transparent; stroke: $base-01--02; stroke-width: 5px; stroke-linecap: round; } } .icon__loader-sm { width: 1.4rem; height: 1.4rem; vertical-align: text-bottom; border-width: .2em; line-height:0; } .loader__overlay { display: block; position: fixed; top: 0; left: 0; background: $base-02--07; height: 100%; z-index: 90; width: 100%; }