PendingAnimation #

import PendingAnimation from '@ryanatkn/fuz/PendingAnimation.svelte'; <PendingAnimation /> •••

The default animation has text children, so they scale with font-size.

Set size with custom properties:

<PendingAnimation --font_size="var(--font_size_xl5)" />

•••

Set size with classes:

<PendingAnimation attrs={{class: 'font_size_xl3'}} />

•••

Size is inherited by default:

<div class="font_size_xl4"><PendingAnimation /></div>

•••

With `inline`
#

<PendingAnimation inline />

with inline={} •••

With custom children
#

<PendingAnimation --font_size="var(--font_size_xl6)">
	{🐢}
</PendingAnimation>

with children

🐢🐢🐢

With children `index` prop
#

<PendingAnimation>
	{#snippet children(index)}
		<div class="box">
			{🐸}
			{index}
			<span class="font_size_xl5">
				{⏳}
			</span>}
		</div>
	{/snippet}
</PendingAnimation>

with running={}

and children

🐸 0 ⏳

🐸 1 ⏳

🐸 2 ⏳

With custom duration
#

<PendingAnimation --animation_duration="var(--duration_6)" --font_size="var(--font_size_xl4)" />

🐢🐢🐢