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; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 11 | position: fixed; |
| 12 | top: 50%; |
Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 13 | left: 50%; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 14 | transform: translate(-50%, -50%); |
Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 15 | margin: 3em 0; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 16 | z-index: 91; |
Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 17 | } |
| 18 | |
| 19 | .loader{ |
| 20 | width:100%; |
| 21 | height:100%; |
| 22 | transform: translateZ(0) rotate(360deg); |
| 23 | transform-origin: center center; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 24 | -moz-transform-origin: center center; /* firefox requires fixed values */ |
Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 25 | animation: rotate 1s linear infinite; |
| 26 | } |
| 27 | |
| 28 | .loader__path{ |
| 29 | stroke-dasharray: 80px; |
| 30 | stroke-dashoffset: 9.7px; |
| 31 | r: 16px; |
| 32 | cx: 50px; |
| 33 | cy: 50px; |
| 34 | fill: transparent; |
Yoshie Muranaka | 6f7ec80 | 2019-06-24 14:35:41 -0500 | [diff] [blame] | 35 | stroke: $base-01--02; |
Michael Davis | b055eb0 | 2017-07-20 17:03:39 -0500 | [diff] [blame] | 36 | stroke-width: 5px; |
| 37 | stroke-linecap: round; |
| 38 | transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1); |
| 39 | -webkit-animation: a 4s ease-out infinite; |
| 40 | animation: a 4s ease-out infinite; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 41 | } |
| 42 | |
| 43 | .loader__overlay { |
| 44 | display: block; |
| 45 | position: fixed; |
| 46 | top: 0; |
| 47 | left: 0; |
Yoshie Muranaka | 6f7ec80 | 2019-06-24 14:35:41 -0500 | [diff] [blame] | 48 | background: $base-02--07; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 49 | height: 100%; |
| 50 | z-index: 90; |
Michael Davis | 428375e | 2017-08-01 15:48:34 -0500 | [diff] [blame] | 51 | width: 100%; |
Ed Tanous | d5bf6ba | 2019-06-10 17:48:53 -0700 | [diff] [blame] | 52 | } |