Add loading page
This commit is contained in:
parent
f95e85991f
commit
2f9c801890
|
|
@ -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>);
|
||||||
|
}
|
||||||
|
|
@ -72,3 +72,19 @@ footer {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
min-height: 100vh;
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue