1// Loader Spinner 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.icon__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 svg circle { 27 stroke-dasharray: 80px; 28 stroke-dashoffset: 9.7px; 29 fill: transparent; 30 stroke: $base-01--02; 31 stroke-width: 5px; 32 stroke-linecap: round; 33 } 34} 35 36.icon__loader-sm { 37 width: 1.4rem; 38 height: 1.4rem; 39 vertical-align: text-bottom; 40 border-width: .2em; 41 line-height:0; 42} 43 44.loader__overlay { 45 display: block; 46 position: fixed; 47 top: 0; 48 left: 0; 49 background: $base-02--07; 50 height: 100%; 51 z-index: 90; 52 width: 100%; 53}