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>