blob: 9f2031e76b12547ab68408afc353cdbb104bad95 [file] [log] [blame]
Dixsie Wolmersd4a5d6f2019-11-17 18:21:50 -06001// Loader Spinner
Michael Davisb055eb02017-07-20 17:03:39 -05002
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 Davis428375e2017-08-01 15:48:34 -050011 position: fixed;
12 top: 50%;
Michael Davisb055eb02017-07-20 17:03:39 -050013 left: 50%;
Michael Davis428375e2017-08-01 15:48:34 -050014 transform: translate(-50%, -50%);
Michael Davisb055eb02017-07-20 17:03:39 -050015 margin: 3em 0;
Michael Davis428375e2017-08-01 15:48:34 -050016 z-index: 91;
Michael Davisb055eb02017-07-20 17:03:39 -050017}
18
Dixsie Wolmersd4a5d6f2019-11-17 18:21:50 -060019.icon__loader {
Michael Davisb055eb02017-07-20 17:03:39 -050020 width:100%;
21 height:100%;
22 transform: translateZ(0) rotate(360deg);
23 transform-origin: center center;
Michael Davis428375e2017-08-01 15:48:34 -050024 -moz-transform-origin: center center; /* firefox requires fixed values */
Michael Davisb055eb02017-07-20 17:03:39 -050025 animation: rotate 1s linear infinite;
Dixsie Wolmersd4a5d6f2019-11-17 18:21:50 -060026 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 }
Michael Davisb055eb02017-07-20 17:03:39 -050034}
35
Dixsie Wolmersd4a5d6f2019-11-17 18:21:50 -060036.icon__loader-sm {
37 width: 1.4rem;
38 height: 1.4rem;
39 vertical-align: text-bottom;
40 border-width: .2em;
41 line-height:0;
Michael Davis428375e2017-08-01 15:48:34 -050042}
43
44.loader__overlay {
45 display: block;
46 position: fixed;
47 top: 0;
48 left: 0;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -050049 background: $base-02--07;
Michael Davis428375e2017-08-01 15:48:34 -050050 height: 100%;
51 z-index: 90;
Michael Davis428375e2017-08-01 15:48:34 -050052 width: 100%;
Dixsie Wolmersd4a5d6f2019-11-17 18:21:50 -060053}