From d6b56ab5c45c3b4540b9fd268522aa2ca9577d65 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 20 Mar 2018 18:44:55 -0700
Subject: [PATCH] Loading screen
---
src/loader.scss | 60 +++++++++++++++++++++++++++++++++
src/react-components/ui-root.js | 9 ++++-
src/room.scss | 15 +++++++++
3 files changed, 83 insertions(+), 1 deletion(-)
create mode 100644 src/loader.scss
diff --git a/src/loader.scss b/src/loader.scss
new file mode 100644
index 000000000..58c0cd691
--- /dev/null
+++ b/src/loader.scss
@@ -0,0 +1,60 @@
+.loader,
+.loader:before,
+.loader:after {
+ background: #555;
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 0.6em;
+ height: 1em;
+ border-radius: 5px;
+}
+.loader {
+ color: #555;
+ text-indent: -9999em;
+ margin-left: 4em;
+ margin-top: 4em;
+ font-size: 11px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+ position: absolute;
+ top: 0;
+ content: '';
+}
+.loader:before {
+ left: -1.2em;
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+}
+.loader:after {
+ left: 1.2em;
+}
+@-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 2.5em;
+ }
+}
+@keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 2.5em;
+ }
+}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 4bf00a571..c666d04ef 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -446,7 +446,14 @@ class UIRoot extends Component {
render() {
if (!this.props.scene.hasLoaded) {
return (
- <div className="loading-panel">Loading scene</div>
+ <div className="loading-panel">
+ <div className="loader-wrap">
+ <div className="loader"/>
+ </div>
+ <div className="loading-panel__title">
+ <b>moz://a</b> duck
+ </div>
+ </div>
);
}
diff --git a/src/room.scss b/src/room.scss
index ce5f78e6c..0832c5d5d 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -1,4 +1,5 @@
@import 'src/fonts';
+@import 'src/loader';
$dark-transparent: rgba(0, 0, 0, 0.4);
$darker-transparent: rgba(0, 0, 0, 0.6);
@@ -94,6 +95,20 @@ $darker-grey: rgba(64, 64, 64, 1.0);
background-color: black;
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.loading-panel__title {
+ font-size: 1.2em;
+}
+
+.loader-wrap {
+ position: relative;
+ width: 100px;
+ height: 80px;
}
.rs-base {
--
GitLab