Madmin
/
KkosmetickySalon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Spinner on Load

This commit is contained in:
matthieu42morin 2024-03-19 22:29:52 +01:00
parent c9221c357e
commit a34fd5b31e
3 changed files with 102 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/lib/components/Spinner.svelte Normal file
View File

@ -0,0 +1,57 @@
<script lang="ts">
//class="fill-primary-500 stroke-primary-500"
//fill="#FF156D" stroke="#FF156D"
</script>
<svg class="h-6 w-6 md:h-10 md:w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" r="15" cx="35" cy="100"
><animate
attributeName="cx"
calcMode="spline"
dur="2"
values="35;165;165;35;35"
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
repeatCount="indefinite"
begin="0"
/></circle
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".8" r="15" cx="35" cy="100"
><animate
attributeName="cx"
calcMode="spline"
dur="2"
values="35;165;165;35;35"
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
repeatCount="indefinite"
begin="0.05"
/></circle
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".6" r="15" cx="35" cy="100"
><animate
attributeName="cx"
calcMode="spline"
dur="2"
values="35;165;165;35;35"
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
repeatCount="indefinite"
begin=".1"
/></circle
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".4" r="15" cx="35" cy="100"
><animate
attributeName="cx"
calcMode="spline"
dur="2"
values="35;165;165;35;35"
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
repeatCount="indefinite"
begin=".15"
/></circle
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".2" r="15" cx="35" cy="100"
><animate
attributeName="cx"
calcMode="spline"
dur="2"
values="35;165;165;35;35"
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
repeatCount="indefinite"
begin=".2"
/></circle
></svg
>

21
src/lib/stores.ts Normal file
View File

@ -0,0 +1,21 @@
import { writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
import type { InstagramPost } from '../types/instagram';
import { derived } from "svelte/store";
import { navigating } from "$app/stores";
export const instagramFeed: Writable<InstagramPost[]> = writable([]);
let timer = null;
/** When navigating from to, time 500ms to be true, else false */
export const navigationIsDelayed = derived(navigating, (newValue, set) => {
if (timer) { clearTimeout(timer); }
if (newValue) {
timer = setTimeout(() => set(true), 500);
}
set(false);
});

20
src/routes/(home)/+layout.svelte → src/routes/+layout.svelte
View File

@ -57,8 +57,11 @@
deepLinkedElement.scrollIntoView();
}
}
}
</script>
};
import { fade } from 'svelte/transition';
import Spinner from '$lib/components/Spinner.svelte';
import { navigationIsDelayed } from '$lib/stores';
</script>
<!-- SEO -->
<svelte:head>
@ -91,8 +94,14 @@
<!-- <Analytics /> -->
<!-- App Shell -->
<Drawer />
<AppShell class="transition-transform {positionClasses}">
{#if $navigationIsDelayed}
<div class="fixed w-full h-full z-10" in:fade={{ duration: 150 }}>
<div class="absolute w-full h-full flex justify-center items-center z-20">
<Spinner />
</div>
</div>
{:else}
<AppShell class="transition-transform {positionClasses}">
<svelte:fragment slot="header">
<MainHeader />
</svelte:fragment>
@ -103,7 +112,8 @@
<svelte:fragment slot="footer">
<MainFooter />
</svelte:fragment>
</AppShell>
</AppShell>
{/if}
<!-- <CookieConsent />
<Segment /> -->