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

<script lang="ts">
	import Ellipsis from './Ellipsis.svelte';
	import Ripple from './Ripple.svelte';
	import Grid from './Grid.svelte';

	export let message: string | undefined = undefined;
	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
	export let colour = 'var(--fg)';
</script>

<div class="card popup">
	{#if loader === 'ellipsis'}
		<Ellipsis {colour} />
	{:else if loader === 'ripple'}
		<Ripple {colour} />
	{:else if loader === 'grid'}
		<Grid {colour} />
	{/if}

	{#if message}
		<p />

		{message}
	{/if}
</div>