restyle the loading page
This commit is contained in:
parent
42cdd16c5f
commit
dc43ab2297
|
@ -2,7 +2,19 @@
|
||||||
import Blek from '../../shared/blek.svelte';
|
import Blek from '../../shared/blek.svelte';
|
||||||
import style from './style.module.scss';
|
import style from './style.module.scss';
|
||||||
|
|
||||||
import Plane from 'svelte-loading-spinners/Plane.svelte';
|
import Plane from 'svelte-loading-spinners/Jumper.svelte';
|
||||||
|
|
||||||
|
let motto_translate = true;
|
||||||
|
let motto_visible = true;
|
||||||
|
const flip_motto = () => {
|
||||||
|
motto_visible = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
motto_visible = true;
|
||||||
|
motto_translate = !motto_translate;
|
||||||
|
}, 1000);
|
||||||
|
setTimeout(flip_motto, 10000);
|
||||||
|
}
|
||||||
|
flip_motto();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={style.root}>
|
<div class={style.root}>
|
||||||
|
@ -10,5 +22,12 @@
|
||||||
<h1>
|
<h1>
|
||||||
Loading...
|
Loading...
|
||||||
</h1>
|
</h1>
|
||||||
<Plane color='#e1e1e1' duration='1.5s' />
|
<Plane color='#e1e1e1' duration='3s' />
|
||||||
|
<p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
|
||||||
|
{
|
||||||
|
!motto_translate ?
|
||||||
|
'Ad astra Augmenta' :
|
||||||
|
'To the stars we rise'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
|
@ -1,12 +1,37 @@
|
||||||
|
@use '../../lib/mixins.scss';
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
@include mixins.no_sel;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
height: 60px;
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.motto {
|
||||||
|
color: #8a8a8a;
|
||||||
|
margin-top: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 9pt;
|
||||||
|
transition: 1s ease;
|
||||||
|
transform: translateY(0px);
|
||||||
|
&.hide {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue