diff options
| author | mat <github@matdoes.dev> | 2022-02-21 00:56:55 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-21 00:56:55 -0600 |
| commit | 34fcffb95db91bc1db80a00af4cf9d1007a9f575 (patch) | |
| tree | 79b770b455b7468de31eded91da0d45fc172fd9f /src/lib/layout/Loader.svelte | |
| parent | 13e5974114f759bae73f3bfd68c62ce9cfaf785e (diff) | |
| download | skyblock-stats-34fcffb95db91bc1db80a00af4cf9d1007a9f575.tar.gz skyblock-stats-34fcffb95db91bc1db80a00af4cf9d1007a9f575.tar.bz2 skyblock-stats-34fcffb95db91bc1db80a00af4cf9d1007a9f575.zip | |
add minions and loader thing
Diffstat (limited to 'src/lib/layout/Loader.svelte')
| -rw-r--r-- | src/lib/layout/Loader.svelte | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte new file mode 100644 index 0000000..8347e16 --- /dev/null +++ b/src/lib/layout/Loader.svelte @@ -0,0 +1,49 @@ +<script lang="ts"> + let progress = 0 + + let widthTransitionDuration = 1000 + + let opacity = 1 + function navigationStart() { + console.log('navigation start') + widthTransitionDuration = 0 + opacity = 1 + progress = 0 + requestAnimationFrame(() => { + widthTransitionDuration = 1000 + progress = 1 + }) + } + function navigationEnd() { + console.log('navigation end', widthTransitionDuration) + opacity = 0 + setTimeout(() => { + widthTransitionDuration = 0 + progress = 0 + }, 300) + } +</script> + +<svelte:window + on:sveltekit:navigation-start={navigationStart} + on:sveltekit:navigation-end={navigationEnd} +/> + +<div + id="loader" + style="width:{progress * + 100}%;transition-duration:{widthTransitionDuration}ms,300ms;opacity:{opacity * 100}%" +/> + +<style> + #loader { + position: fixed; + left: 0px; + top: 0px; + transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 100ms linear; + height: 8px; + z-index: 20; + /* add a faint glow effect */ + background: -moz-linear-gradient(top, #16e 0%, #16e 50%, #16e5 50%, #16e0 100%); + } +</style> |