diff --git a/src/loader.scss b/src/loader.scss index 58c0cd6917f12d94738748a1ef84a9b11b0ea943..e906ccfb10bfe6069cee050da907fb586e36634d 100644 --- a/src/loader.scss +++ b/src/loader.scss @@ -1,4 +1,4 @@ -.loader, +.loader-center, .loader:before, .loader:after { background: #555; @@ -17,15 +17,18 @@ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } +.loader-center, .loader:before, .loader:after { position: absolute; top: 0; content: ''; } +.loader-center { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} .loader:before { left: -1.2em; -webkit-animation-delay: -0.32s; @@ -38,23 +41,23 @@ 0%, 80%, 100% { - box-shadow: 0 0; height: 2em; + top: 0; } 40% { - box-shadow: 0 -2em; - height: 2.5em; + height: 3.5em; + top: -0.75em; } } @keyframes load1 { 0%, 80%, 100% { - box-shadow: 0 0; height: 2em; + top: 0; } 40% { - box-shadow: 0 -2em; - height: 2.5em; + height: 3.5em; + top: -0.75em; } } diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 1d0b520f7c288200a8084c61d931fce76ab7d5ed..55da51ce0fbcb25ca221483867bc066239266328 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -452,7 +452,9 @@ class UIRoot extends Component { return ( <div className="loading-panel"> <div className="loader-wrap"> - <div className="loader"/> + <div className="loader"> + <div className="loader-center"/> + </div> </div> <div className="loading-panel__title"> <b>moz://a</b> duck diff --git a/src/room.scss b/src/room.scss index 1f8608c9020913e2e2222e3f571beecd942508f5..407925a68625ca5433c0815951231637d76830d6 100644 --- a/src/room.scss +++ b/src/room.scss @@ -127,7 +127,7 @@ $darker-grey: rgba(64, 64, 64, 1.0); .loader-wrap { position: relative; width: 100px; - height: 80px; + height: 90px; } .rs-base {