youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add loading bar component

Browse source
This commit is contained in:
Youwen Wu 2024-04-07 03:07:59 -07:00
parent f6b4dfa709
commit c100d2c1ed
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
5 changed files with 48 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/BackToTop.svelte
View file

@ -23,7 +23,7 @@
<svelte:window on:scroll={handleScroll} />
{#if showButton}
<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
<div class="fixed bottom-10 right-10 z-30" transition:fly={{ y: 50, duration: 150 }}>
<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
</div>
{/if}

38
src/lib/components/LoadingBar.svelte Normal file
View file

@ -0,0 +1,38 @@
<script lang="ts">
import { Progress } from 'bits-ui';
import { fly } from 'svelte/transition';
export let state: 'loading' | 'done' = 'done';
let value = 0;
let hidden = true;
$: {
if (state === 'loading') {
hidden = false;
value = 0;
} else {
hidden = false;
value = 100;
}
setTimeout(() => {
hidden = true;
}, 1500);
}
</script>
{#if !hidden}
<div class="fixed top-0 right-0 w- z-40" transition:fly={{ y: -25, duration: 500 }}>
<Progress.Root
{value}
max={100}
class="relative h-[15px] overflow-hidden bg-dark-10 shadow-mini-inset rounded-r-xl"
>
<div
class="h-full w-full flex-1 bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out rounded-r-xl"
style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (100 ?? 1)}%)`}
/>
</Progress.Root>
</div>
{/if}

2
src/lib/components/Navbar/Navbar.svelte
View file

@ -26,7 +26,7 @@
});
</script>
<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-display">
<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-30 font-display">
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
<Drawer />
{#if current === 'blog'}

2
src/lib/components/Toc/TocHeader.svelte
View file

@ -23,7 +23,7 @@
};
</script>
<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-20 lg:hidden">
<Accordion.Root class="px-8" bind:value>
<Accordion.Item value="toc">
<Accordion.Trigger

7
src/routes/+layout.svelte
View file

@ -10,9 +10,12 @@
import { Toaster } from '$lib/components/ui/sonner';
import { onMount } from 'svelte';
import { afterNavigate, beforeNavigate } from '$app/navigation';
import LoadingBar from '$lib/components/LoadingBar.svelte';
let root: HTMLElement | null;
let loadingState: 'loading' | 'done' = 'done';
onMount(() => {
root = document.getElementsByTagName('html')[0];
@ -21,16 +24,20 @@
beforeNavigate(() => {
root?.classList.remove('smoothscroll');
loadingState = 'loading';
});
afterNavigate(() => {
root?.classList.add('smoothscroll');
loadingState = 'done';
});
</script>
<Toaster />
<ModeWatcher />
<LoadingBar state={loadingState} />
<Navbar />
<div class="pt-24">
<slot />