Toast auto remove after time duration.

src/lib/toast/Toast.svelte

@@ -1,22 +1,13 @@
 <script>
-	import { tweened } from 'svelte/motion';
 	import { fly, fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 	import Portal from '../Portal.svelte';
 	import { toast } from './toast';
+	import ToastMessage from './ToastMessage.svelte';
 
-	let progress = tweened(0, { duration: 1000 });
-	async function updateProgress() {
-		const newProgress = Math.random() * 100;
-		await progress.set(newProgress);
-		toast.remove();
-	}
+	export let duration = 1000;
 </script>
 
-<h1>{$progress}</h1>
-<div style={`width: ${$progress}%; height: 10px; background: green;`} />
-<button on:click={updateProgress}>GO</button>
-
 <Portal>
 	<div class="toast-wrapper">
 		{#each $toast as message (message)}
@@ -27,7 +18,7 @@
 				in:fly={{ opacity: 0, x: 100 }}
 				class="toast"
 			>
-				<p>{message}</p>
+				<ToastMessage {message} {duration} />
 			</div>
 		{/each}
 	</div>
@@ -44,10 +35,7 @@
 		margin-bottom: 1rem;
 		padding: 20px;
 		border-radius: 15px;
+		background: white;
 		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
 	}
-
-	p {
-		margin: 0;
-	}
 </style>

src/lib/toast/ToastMessage.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { onMount } from 'svelte';
+	import { toast } from './toast';
+	import { tweened } from 'svelte/motion';
+
+	export let message = '';
+	export let duration = 1000;
+
+	let progress = tweened(100, { duration });
+
+	onMount(async () => {
+		await progress.set(0);
+		toast.remove();
+	});
+</script>
+
+<div style={`width: ${$progress}%; height: 10px; background: green;`} />
+<p>{message}</p>
+
+<style>
+	p {
+		margin: 0;
+	}
+</style>

src/routes/index.svelte

@@ -26,7 +26,7 @@
 	</div>
 </Modal>
 
-<Toast />
+<Toast duration={3000} />
 <button on:click={() => toast.send('New Message' + Math.random())}>New Toast</button>
 
 <!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->