OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2024-11-23 15:26:40 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add loading bar

Browse source
This commit is contained in:
I Made Setia Baruna 2021-01-09 04:24:20 +08:00
parent fd669a3bff
commit 23f66222dd
1 changed files with 46 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/routes/_layout.svelte
View file

@ -1,5 +1,9 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { derived } from 'svelte/store';
import { stores } from '@sapper/app';
import Modal from 'svelte-simple-modal'; import Modal from 'svelte-simple-modal';
import Tailwind from '../components/Tailwindcss.svelte'; import Tailwind from '../components/Tailwindcss.svelte';
@ -14,12 +18,51 @@
export let segment; export let segment;
const { preloading } = stores();
const delayedPreloading = derived(preloading, (currentPreloading, set) => {
setTimeout(() => set(currentPreloading), 250);
});
// check local storage save on load // check local storage save on load
onMount(() => { onMount(() => {
checkLocalSave(); checkLocalSave();
}); });
</script> </script>
<style>
.loading-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: transparent;
overflow: hidden;
z-index: 100;
}
.loading-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 3px;
background-color: #4e7cff;
box-shadow: 10px 0 20px 20px #4e7cff, -10px 0 20px 20px #4e7cff;
animation: loading-bar 2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes loading-bar {
0% {
left: -25%;
}
100% {
left: 110%;
}
}
</style>
<svelte:head> <svelte:head>
<title>Paimon.moe</title> <title>Paimon.moe</title>
</svelte:head> </svelte:head>
@ -40,6 +83,9 @@
</main> </main>
</DataSync> </DataSync>
</Modal> </Modal>
{#if $preloading && $delayedPreloading}
<div transition:fade class="loading-bar" />
{/if}
<p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600"> <p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
Paimon.moe is not affiliated with miHoYo.<br /> Paimon.moe is not affiliated with miHoYo.<br />
Genshin Impact, game content and materials are trademarks and copyrights of miHoYo. Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.