blob: bfd0272b5d98472e88f55c5fe2b7c853b329573e [file] [log] [blame]
Michael Davisb055eb02017-07-20 17:03:39 -05001// 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 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
19.loader{
20 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;
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 Muranaka6f7ec802019-06-24 14:35:41 -050035 stroke: $base-01--02;
Michael Davisb055eb02017-07-20 17:03:39 -050036 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 Davis428375e2017-08-01 15:48:34 -050041}
42
43.loader__overlay {
44 display: block;
45 position: fixed;
46 top: 0;
47 left: 0;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -050048 background: $base-02--07;
Michael Davis428375e2017-08-01 15:48:34 -050049 height: 100%;
50 z-index: 90;
Michael Davis428375e2017-08-01 15:48:34 -050051 width: 100%;
Ed Tanousd5bf6ba2019-06-10 17:48:53 -070052}