Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-28 15:38:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(site): fullscreen loader

Browse source
This commit is contained in:
ThaUnknown 2023-12-02 15:56:52 +01:00
parent 3320b94d77
commit 2ef05e3d4e
3 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/app.html
View file

@ -12,5 +12,10 @@
<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sveltekit-preload-data="hover">
%sveltekit.body%
<div class='h-full con font-weight-bold overflow-hidden position-absolute'>
<div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
Loading...
</div>
</div>
</body>
</html>

57
web/src/lib/components/Loader.svelte Normal file
View file

@ -0,0 +1,57 @@
<script>
import { onMount } from 'svelte'
let animate = false
onMount(() => {
animate = true
})
</script>
<div class='h-full con font-weight-bold overflow-hidden position-absolute' class:animate>
<div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
Loading...
</div>
</div>
<svelte:window on:load={console.log} />
<style>
@keyframes transition {
0% {
background-position: top left;
width: 100vw ;
}
65% {
background-position: top left;
width: 100vw;
}
95% {
background-position: top right
}
100% {
background-position: top right;
width: 0;
}
}
.con {
z-index: 90;
background-position: top left;
width: 100vw;
}
.animate {
animation: 2s transition ease forwards;
}
.text {
font-size: 10rem;
color: transparent;
font-family: Verdana, sans-serif;
width: 100vw;
background: linear-gradient(90deg, #fff 50%, #101113 0), linear-gradient(90deg, #101113 50%, #fff 0);
background-repeat: no-repeat;
background-size: 200% 100%;
background-position: inherit;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
}
</style>

2
web/src/routes/+layout.svelte
View file

@ -1,8 +1,10 @@
<script>
import Footer from '$lib/components/Footer.svelte'
import Loader from '$lib/components/Loader.svelte'
import Navbar from '$lib/components/Navbar.svelte'
</script>
<Loader />
<div class='page-wrapper with-transitions position-relative' data-sidebar-type='overlayed-all'>
<Navbar />
<div class='overflow-x-hidden content-wrapper h-full overflow-y-scroll position-relative'>