restyle the loading page
This commit is contained in:
parent
42cdd16c5f
commit
dc43ab2297
|
@ -2,7 +2,19 @@
|
|||
import Blek from '../../shared/blek.svelte';
|
||||
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>
|
||||
|
||||
<div class={style.root}>
|
||||
|
@ -10,5 +22,12 @@
|
|||
<h1>
|
||||
Loading...
|
||||
</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>
|
|
@ -1,12 +1,37 @@
|
|||
@use '../../lib/mixins.scss';
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
|
||||
@include mixins.no_sel;
|
||||
cursor: default;
|
||||
|
||||
:global {
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 12pt;
|
||||
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