versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ⚡ Add HTML spinner while loading frontend

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-09 10:19:35 +01:00
parent 0ddc9049ff
commit 17441bfd47
No known key found for this signature in database
2 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/spa-loading-template.html Normal file
View file

@ -0,0 +1,47 @@
<div class="loader-container">
<div class="loader-spinner-container">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-loader-icon loader-spinner">
<path d="M12 2v4"></path>
<path d="m16.2 7.8 2.9-2.9"></path>
<path d="M18 12h4"></path>
<path d="m16.2 16.2 2.9 2.9"></path>
<path d="M12 18v4"></path>
<path d="m4.9 19.1 2.9-2.9"></path>
<path d="M2 12h4"></path>
<path d="m4.9 4.9 2.9 2.9"></path>
</svg>
</div>
</div>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
width: 100dvw;
padding: 1.5rem;
}
.loader-spinner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader-spinner {
animation: spin 1s linear infinite;
width: 2rem;
height: 2rem;
}
</style>

12
pages/loader.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div class="p-6 flex items-center justify-center h-dvh w-dvw">
<div class="flex flex-col items-center justify-center gap-4">
<Loader class="animate-spin size-8" />
<!-- <p class="text-xl font-semibold tracking-tight">Versia Frontend</p> -->
</div>
</div>
</template>
<script lang="ts" setup>
import { Loader } from "lucide-vue-next";
</script>