diff options
| author | Fuwn <[email protected]> | 2024-01-30 20:53:24 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-30 20:53:24 -0800 |
| commit | 0d3553c22391afcad2770fdab088b42a3aae97dc (patch) | |
| tree | 3987da52c8e7f352312190996c9c54ca1c207492 /src/lib/Loading/Message.svelte | |
| parent | fix(birthdays): anisearch if browser (diff) | |
| download | due.moe-0d3553c22391afcad2770fdab088b42a3aae97dc.tar.xz due.moe-0d3553c22391afcad2770fdab088b42a3aae97dc.zip | |
feat(badges): cool loading message
Diffstat (limited to 'src/lib/Loading/Message.svelte')
| -rw-r--r-- | src/lib/Loading/Message.svelte | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte new file mode 100644 index 00000000..b00cb386 --- /dev/null +++ b/src/lib/Loading/Message.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> + import Ellipsis from './Ellipsis.svelte'; + import Ripple from './Ripple.svelte'; + + export let message = 'Loading ...'; + export let loader: 'ellipsis' | 'ripple' = 'ellipsis'; +</script> + +<div class="card popup"> + {#if loader === 'ellipsis'} + <Ellipsis /> + {:else if loader === 'ripple'} + <Ripple /> + {/if} + + <p /> + + {#if message} + <p>{message}</p> + {/if} +</div> + +<style> + .popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9999; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +</style> |