Add loading bar

This commit is contained in:
I Made Setia Baruna 2021-01-09 04:24:20 +08:00
parent fd669a3bff
commit 23f66222dd

View file

@ -1,5 +1,9 @@
<script>
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 Tailwind from '../components/Tailwindcss.svelte';
@ -14,12 +18,51 @@
export let segment;
const { preloading } = stores();
const delayedPreloading = derived(preloading, (currentPreloading, set) => {
setTimeout(() => set(currentPreloading), 250);
});
// check local storage save on load
onMount(() => {
checkLocalSave();
});
</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>
<title>Paimon.moe</title>
</svelte:head>
@ -40,6 +83,9 @@
</main>
</DataSync>
</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">
Paimon.moe is not affiliated with miHoYo.<br />
Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.