ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-02 15:44:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: better spinner

Browse Source
This commit is contained in:
afn 2022-10-24 16:55:53 -04:00
parent e59561b015
commit 889a89a0ad
2 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/lib/components/atoms/Spinner.svelte
View File

@ -1,23 +1,26 @@
<div class="spin-container"> <script>
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" /> import { fade } from "svelte/transition";
</div> </script>
<div class="spinner" transition:fade={{duration: 250}}/>
<style> <style>
.spin-container { @keyframes spinner {
position:absolute; to {
top:50%; transform: rotate(360deg);
left:50%; }
transform:translate(-50%, -50%); }
z-index: 1000;
} .spinner:before {
.logo-image { content: '';
animation: rotate 2s linear infinite; box-sizing: border-box;
width: 75vmin; position: fixed;
height: 75vmin; top: 48.25%;
} left: 48.25%;
@keyframes rotate { width: 50px;
100% { height: 50px;
transform: rotate(360deg); border-radius: 50%;
} border: 4.5px solid transparent;
} border-top-color: var(--accent-color);
animation: spinner 0.6s linear infinite;
}
</style> </style>

4
src/routes/+layout.svelte
View File

@ -9,8 +9,8 @@
// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived // Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
const show_loading_animation = derived(RouterEvents, ($event, set) => { const show_loading_animation = derived(RouterEvents, ($event, set) => {
if ($event.navigating) { if ($event.navigating) {
// Wait 300 ms before showing the animation. // Wait 250 ms before showing the animation.
const timeout = setTimeout(() => set(true), 300); const timeout = setTimeout(() => set(true), 250);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} else { } else {
set(false) set(false)