Add loading page

2019-06-20 15:39:49 +02:00 · 2019-06-20 15:39:49 +02:00 · 2f9c801890
parent f95e85991f
commit 2f9c801890
2 changed files with 39 additions and 0 deletions
--- a/js/components/LoadingPage.js
+++ b/js/components/LoadingPage.js
@ -0,0 +1,23 @@
+import Head from 'next/head';
+import {TurniereNavigation} from './Navigation';
+import {Container} from 'reactstrap';
+import {Footer} from './Footer';
+import React from 'react';
+
+export function LoadingPage(props) {
+    return (<div>
+        <Head>
+            <title>{props.title}</title>
+        </Head>
+        <TurniereNavigation/>
+        <Container>
+            <div className='text-center'>
+                <img src='/static/images/logo-questionmark.png' alt='' className='loading-logo'/>
+            </div>
+            <div className='py-5 text-center w-100 h1 custom-font'>
+                {props.text}
+            </div>
+        </Container>
+        <Footer/>
+    </div>);
+}
--- a/static/css/everypage.css
+++ b/static/css/everypage.css
@ -72,3 +72,19 @@ footer {
    background-size: cover;
    min-height: 100vh;
 }
+
+.loading-logo {
+    animation: blink .8s ease-in-out infinite;
+}
+
+@keyframes blink {
+    0% {
+        filter: grayscale(100%);
+    }
+    70% {
+        filter: grayscale(0%);
+    }
+    100% {
+        filter: grayscale(100%);
+    }
+}