mirror of
https://github.com/BradNut/svelteKitPageLoader
synced 2025-09-08 17:40:35 +00:00
32 lines
548 B
Svelte
32 lines
548 B
Svelte
|
<script lang="ts">
|
||
|
|
import { loading } from '$lib/loading';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if $loading}
|
||
|
|
<div />
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
div {
|
||
|
|
--size: 100px;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
inset: calc(50% - calc(var(--size) / 2));
|
||
|
|
background: purple;
|
||
|
|
border-radius: var(--size);
|
||
|
|
height: var(--size);
|
||
|
|
width: var(--size);
|
||
|
|
animation: moveLoader 1s infinite alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveLoader {
|
||
|
|
from {
|
||
|
|
transform: translate3d(100px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: translate3d(-100px, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|