BradNut/svelte-library
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-library synced 2025-09-08 17:40:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Using Svelte Tweened as a timeout.

Browse source
This commit is contained in:
Bradley Shellnut 2021-07-28 16:12:30 -07:00
parent b1fd5a59af
commit d5ee8d9e1e
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/toast/Toast.svelte
View file

@ -1,10 +1,22 @@
<script> <script>
import { tweened } from 'svelte/motion';
import { fly, fade } from 'svelte/transition'; import { fly, fade } from 'svelte/transition';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import Portal from '../Portal.svelte'; import Portal from '../Portal.svelte';
import { toast } from './toast'; import { toast } from './toast';
let progress = tweened(0, { duration: 1000 });
async function updateProgress() {
const newProgress = Math.random() * 100;
await progress.set(newProgress);
toast.remove();
}
</script> </script>
<h1>{$progress}</h1>
<div style={`width: ${$progress}%; height: 10px; background: green;`} />
<button on:click={updateProgress}>GO</button>
<Portal> <Portal>
<div class="toast-wrapper"> <div class="toast-wrapper">
{#each $toast as message (message)} {#each $toast as message (message)}