Add inline loading spinner component
This commit is contained in:
parent
b63c63f679
commit
7472f96b5d
28
src/lib/navigation/InLineLoading.svelte
Normal file
28
src/lib/navigation/InLineLoading.svelte
Normal 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>
|
Loading…
Reference in New Issue
Block a user