1*d4a5d6f4SDixsie Wolmers// Loader Spinner 2b055eb0cSMichael Davis 3b055eb0cSMichael Davis@keyframes rotate { 4b055eb0cSMichael Davis 0% { transform: rotate(0deg);} 5b055eb0cSMichael Davis 100% { transform: rotate(360deg);} 6b055eb0cSMichael Davis} 7b055eb0cSMichael Davis 8b055eb0cSMichael Davis.loader__wrapper { 9b055eb0cSMichael Davis width: 115px; 10b055eb0cSMichael Davis height: 115px; 11428375e8SMichael Davis position: fixed; 12428375e8SMichael Davis top: 50%; 13b055eb0cSMichael Davis left: 50%; 14428375e8SMichael Davis transform: translate(-50%, -50%); 15b055eb0cSMichael Davis margin: 3em 0; 16428375e8SMichael Davis z-index: 91; 17b055eb0cSMichael Davis} 18b055eb0cSMichael Davis 19*d4a5d6f4SDixsie Wolmers.icon__loader { 20b055eb0cSMichael Davis width:100%; 21b055eb0cSMichael Davis height:100%; 22b055eb0cSMichael Davis transform: translateZ(0) rotate(360deg); 23b055eb0cSMichael Davis transform-origin: center center; 24428375e8SMichael Davis -moz-transform-origin: center center; /* firefox requires fixed values */ 25b055eb0cSMichael Davis animation: rotate 1s linear infinite; 26*d4a5d6f4SDixsie Wolmers svg circle { 27b055eb0cSMichael Davis stroke-dasharray: 80px; 28b055eb0cSMichael Davis stroke-dashoffset: 9.7px; 29b055eb0cSMichael Davis fill: transparent; 306f7ec80eSYoshie Muranaka stroke: $base-01--02; 31b055eb0cSMichael Davis stroke-width: 5px; 32b055eb0cSMichael Davis stroke-linecap: round; 33*d4a5d6f4SDixsie Wolmers } 34*d4a5d6f4SDixsie Wolmers} 35*d4a5d6f4SDixsie Wolmers 36*d4a5d6f4SDixsie Wolmers.icon__loader-sm { 37*d4a5d6f4SDixsie Wolmers width: 1.4rem; 38*d4a5d6f4SDixsie Wolmers height: 1.4rem; 39*d4a5d6f4SDixsie Wolmers vertical-align: text-bottom; 40*d4a5d6f4SDixsie Wolmers border-width: .2em; 41*d4a5d6f4SDixsie Wolmers line-height:0; 42b055eb0cSMichael Davis} 43428375e8SMichael Davis 44428375e8SMichael Davis.loader__overlay { 45428375e8SMichael Davis display: block; 46428375e8SMichael Davis position: fixed; 47428375e8SMichael Davis top: 0; 48428375e8SMichael Davis left: 0; 496f7ec80eSYoshie Muranaka background: $base-02--07; 50428375e8SMichael Davis height: 100%; 51428375e8SMichael Davis z-index: 90; 52428375e8SMichael Davis width: 100%; 53428375e8SMichael Davis}