mirror of
https://github.com/BradNut/svelteKitPageLoader
synced 2025-09-08 17:40:35 +00:00
Fix object print to screen.
This commit is contained in:
parent
ddc65fbbfb
commit
090fb4056f
3 changed files with 15 additions and 18 deletions
|
|
@ -1,12 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { loading } from '$lib/loading';
|
||||
import { loading } from '$lib/loading'
|
||||
|
||||
$: if ($loading.status === 'NAVIGATING') {
|
||||
setTimeout(() => {
|
||||
if ($loading.status === 'NAVIGATING') {
|
||||
$loading.status = 'LOADING';
|
||||
$loading.status = 'LOADING'
|
||||
}
|
||||
}, 400);
|
||||
}, 400)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset: calc(50% - calc(var(--size) / 2));
|
||||
inset: calc(50% - calc(var(--size)/2));
|
||||
background: purple;
|
||||
border-radius: var(--size);
|
||||
height: var(--size);
|
||||
|
|
@ -35,11 +35,10 @@
|
|||
|
||||
@keyframes moveLoader {
|
||||
from {
|
||||
transform: translate3d(100px, 0, 0);
|
||||
transform: translate3d(100px, 0, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(-100px, 0, 0);
|
||||
transform: translate3d(-100px, 0, 0)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
import { writable } from "svelte/store";
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const newLoading = () => {
|
||||
const { subscribe, update, set } = writable({
|
||||
status: "IDLE", // IDLE, LOADING, NAVIGATING
|
||||
message: ""
|
||||
status: 'IDLE', // IDLE, LOADING, NAVIGATING
|
||||
message: '',
|
||||
});
|
||||
|
||||
function setNavigate(isNavigating: boolean) {
|
||||
update(() => {
|
||||
return {
|
||||
status: isNavigating ? 'NAVIGATING' : 'IDLE',
|
||||
message: ''
|
||||
}
|
||||
message: '',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -19,12 +19,12 @@ const newLoading = () => {
|
|||
update(() => {
|
||||
return {
|
||||
status: isLoading ? 'LOADING' : 'IDLE',
|
||||
message: isLoading ? message : ''
|
||||
}
|
||||
})
|
||||
message: isLoading ? message : '',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return { subscribe, update, set, setNavigate, setLoading };
|
||||
}
|
||||
};
|
||||
|
||||
export const loading = newLoading();
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
$: loading.setNavigate(!!$navigating);
|
||||
</script>
|
||||
|
||||
{$loading}
|
||||
|
||||
<slot />
|
||||
|
||||
<button on:click={() => loading.setLoading(true, "I'm loading")}>Set Loading</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue