Add inline loading spinner component

This commit is contained in:
Fred Boniface 2024-07-03 11:01:58 +01:00
parent b63c63f679
commit 7472f96b5d
1 changed files with 28 additions and 0 deletions

View File

@ -0,0 +1,28 @@
<script lang="ts">
export let size: string = "1em";
export let color: string = "aliceblue";
</script>
<div class="spinner" style="--spinner-size: {size}; --spinner-color: {color};" />
<style>
.spinner {
display: inline-block;
width: var(--spinner-size);
height: var(--spinner-size);
border: 2px solid transparent;
border-top-color: var(--spinner-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>