chore: remove unused loading component

This commit is contained in:
Youwen Wu 2024-03-11 00:16:37 -07:00
parent c19410e7f3
commit 05b50ded11
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
4 changed files with 0 additions and 106 deletions

View file

@ -1,22 +0,0 @@
<script lang="ts">
import { blur } from 'svelte/transition'
import SvelteLogo from './SvelteLogo.svelte'
</script>
<div
class="absolute w-screen h-screen flex justify-center items-center flex-col overflow-hidden select-none bg"
transition:blur={{ duration: 300, amount: 0.5 }}
>
<div class="max-w-64">
<SvelteLogo />
</div>
</div>
<style lang="postcss">
.bg {
background-image: url('../../assets/wallpaper.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>

View file

@ -1,64 +0,0 @@
<script lang="ts">
import { quintOut } from 'svelte/easing'
import { fade, draw, fly } from 'svelte/transition'
import { expand } from './customTransitions'
import { inner, outer } from './shape'
import { onMount } from 'svelte'
let visible = false
onMount(() => {
visible = true
})
</script>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade={{ duration: 200 }} opacity="0.35">
<path
in:expand={{ duration: 400, delay: 1000, easing: quintOut }}
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path
in:draw={{ duration: 1000 }}
style="stroke:#ff3e00; stroke-width: 2;"
stroke-linecap="round"
d={inner}
/>
</g>
</svg>
<div class="centered" out:fly={{ y: -20, duration: 800 }}>
{#each 'JANKBOARD' as char, i}
<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}
>{char}</span
>
{/each}
</div>
{/if}
<style lang="postcss">
svg {
width: 100%;
height: 100%;
}
path {
fill: white;
opacity: 1;
}
.centered {
@apply text-8xl absolute text-slate-300;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
letter-spacing: 0.12em;
font-weight: 400;
}
.centered span {
will-change: filter;
}
</style>

View file

@ -1,18 +0,0 @@
import { cubicOut } from 'svelte/easing'
import type { EasingFunction } from 'svelte/transition'
export function expand(
node: Element,
params: { delay: number; duration: number; easing: EasingFunction }
) {
const { delay = 0, duration = 400, easing = cubicOut } = params
const w = parseFloat(getComputedStyle(node).strokeWidth)
return {
delay,
duration,
easing,
css: (t: number) => `opacity: ${t}; stroke-width: ${t * w}`,
}
}

View file

@ -1,2 +0,0 @@
export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`
export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`