feat: make Loading component a spinning load circle

This commit is contained in:
SauceyRed 2025-05-28 02:17:54 +02:00
parent 8140335518
commit 22ca450651
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7

View file

@ -1,6 +1,6 @@
<template>
<div>
Loading...
<div id="loading-container">
<Icon name="lucide:loader-circle" id="loading-circle" />
</div>
</template>
@ -8,6 +8,31 @@
</script>
<style>
<style scoped>
#loading-container {
position: fixed;
left: 50dvw;
top: 50dvh;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loading-circle {
animation-name: spin;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
font-size: 2rem;
}
</style>