src/lib/Loading/Message.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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>