open-webui/src/lib/components/common/Marquee.svelte
2024-11-03 03:00:28 -08:00

31 lines
544 B
Svelte

<script lang="ts">
import { fade, fly } from 'svelte/transition';
import { onMount } from 'svelte';
let idx = 0;
export let className = '';
export let words = ['lorem', 'ipsum'];
export let duration = 4000;
onMount(() => {
setInterval(async () => {
if (idx === words.length - 1) {
idx = 0;
} else {
idx = idx + 1;
}
}, duration);
});
</script>
<div class={className}>
<div>
{#key idx}
<div class=" marquee-item" in:fly={{ y: '30%', duration: 1000 }}>
{words.at(idx)}
</div>
{/key}
</div>
</div>