| Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 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 | } |