mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { onNavigate } from "$app/navigation";
|
||
|
|
|
||
|
|
let visible = $state(false);
|
||
|
|
let progress = $state(0);
|
||
|
|
let load_durations = $state<number[]>([]);
|
||
|
|
let average_load = $derived(
|
||
|
|
load_durations.reduce((a, b) => a + b, 0) / load_durations.length,
|
||
|
|
);
|
||
|
|
|
||
|
|
const increment = 1;
|
||
|
|
|
||
|
|
onNavigate((navigation) => {
|
||
|
|
const typical_load_time = average_load || 200; //ms
|
||
|
|
const frequency = typical_load_time / 100;
|
||
|
|
let start = performance.now();
|
||
|
|
// Start the progress bar
|
||
|
|
visible = true;
|
||
|
|
progress = 0;
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
// Increment the progress bar
|
||
|
|
progress += increment;
|
||
|
|
}, frequency);
|
||
|
|
// Resolve the promise when the page is done loading
|
||
|
|
navigation?.complete.then(() => {
|
||
|
|
progress = 100; // Fill out the progress bar
|
||
|
|
clearInterval(interval);
|
||
|
|
// after 100 ms hide the progress bar
|
||
|
|
setTimeout(() => {
|
||
|
|
visible = false;
|
||
|
|
}, 500);
|
||
|
|
// Log how long that one took
|
||
|
|
const end = performance.now();
|
||
|
|
const duration = end - start;
|
||
|
|
load_durations = [...load_durations, duration];
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if visible}
|
||
|
|
<div class="progress" style="width: {progress}%;"></div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style lang="postcss">
|
||
|
|
.progress {
|
||
|
|
background: var(--lightGrey);
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 0.25rem;
|
||
|
|
z-index: 50;
|
||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
</style>
|