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