fix ui package, use sv to create

recreated package using sv, marking correctly as a library. seems I was
missing some sveltekit tooling somewhere along the way otherwise.
This commit is contained in:
Elijah Duffy
2025-04-13 18:09:32 -06:00
parent bf2ef338e9
commit aecfb0ddaa
35 changed files with 310 additions and 55 deletions

53
src/lib/Spinner.svelte Normal file
View File

@@ -0,0 +1,53 @@
<script lang="ts">
let { size }: { size: string } = $props();
</script>
<div class="lds-ring" style="--size: {size}">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
.lds-ring {
display: inline-block;
position: relative;
width: var(--size);
height: var(--size);
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: calc(var(--size) * 0.8);
height: calc(var(--size) * 0.8);
margin: max(calc(var(--size) * 0.1), 2px);
border: max(calc(var(--size) * 0.1), 2px) solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>