diff --git a/lib/Styles/globe.gif b/lib/Styles/globe.gif index 6fbc0aac2..b523d4255 100644 Binary files a/lib/Styles/globe.gif and b/lib/Styles/globe.gif differ diff --git a/lib/Views/Loader.tsx b/lib/Views/Loader.tsx index 66ac61fd5..d48d2d3f8 100644 --- a/lib/Views/Loader.tsx +++ b/lib/Views/Loader.tsx @@ -1,6 +1,8 @@ import globeGif from "../Styles/globe.gif"; import Styles from "./loader.scss"; +const loadingStr = "Loading the globe"; + export const Loader = () => { return (
{ backgroundColor: "#383F4D" }} > - +
+ +
{loadingStr}
+
); }; diff --git a/lib/Views/loader.scss b/lib/Views/loader.scss index f73795363..5e464efa5 100644 --- a/lib/Views/loader.scss +++ b/lib/Views/loader.scss @@ -1,19 +1,3 @@ -.loader-ui img { - display: block; - margin: calc(50vh - 150px) auto; -} - -@media (min-width: 768px) { - .loader-ui { - display: flex; - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - } -} - .loader-ui { transition: opacity, 2s; opacity: 1; @@ -24,8 +8,22 @@ left: 0; top: 0; pointer-events: none; + display: flex; } .loader-ui-hide { opacity: 0; } + +.loader-ui-container { + margin: calc(50vh - 150px) auto; + text-align: center; +} + +.loader-ui-text { + color: #686d79; + font-family: sans-serif; + font-weight: bold; + position: relative; + top: -30%; +} diff --git a/lib/Views/loader.scss.d.ts b/lib/Views/loader.scss.d.ts index b166a946e..42c508a6f 100644 --- a/lib/Views/loader.scss.d.ts +++ b/lib/Views/loader.scss.d.ts @@ -1,9 +1,13 @@ declare namespace LoaderScssNamespace { export interface ILoaderScss { "loader-ui": string; + "loader-ui-container": string; "loader-ui-hide": string; + "loader-ui-text": string; loaderUi: string; + loaderUiContainer: string; loaderUiHide: string; + loaderUiText: string; } }