youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: update loading screen

Browse source
This commit is contained in:
Youwen Wu 2024-03-16 21:06:51 -07:00
parent 05a1841f33
commit 8ab9fadc22
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
2 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/public/index.html Normal file
View file

File diff suppressed because one or more lines are too long

10
splash-screen/src/lib/Loading.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { blur, fade } from 'svelte/transition' import { fly } from 'svelte/transition'
import SvelteLogo from './SvelteLogo.svelte' import SvelteLogo from './SvelteLogo.svelte'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { cubicIn } from 'svelte/easing'
let loadingStuck = false let loadingStuck = false
@ -15,17 +16,16 @@
<div <div
class="absolute w-screen h-screen flex justify-center items-center flex-col overflow-hidden select-none bg" class="absolute w-screen h-screen flex justify-center items-center flex-col overflow-hidden select-none bg"
transition:blur={{ duration: 300, amount: 0.5 }}
> >
<div class="max-w-64"> <div class="max-w-64">
<SvelteLogo /> <SvelteLogo />
</div> </div>
{#if loadingStuck} {#if loadingStuck}
<p <p
class="text-5xl text-slate-300 absolute bottom-20 animate-pulse" class="text-4xl text-slate-300 absolute bottom-20 animate-pulse font-medium"
transition:fade={{ duration: 300 }} in:fly={{ duration: 150, y: 25, easing: cubicIn }}
> >
Loading 3D assets...please wait Loading 3D assets...
</p> </p>
{/if} {/if}
</div> </div>