diff options
| author | Fuwn <[email protected]> | 2024-02-11 10:07:25 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-02-11 10:07:40 -0800 |
| commit | 55a28d0f4dc32dc8a096c959053517942a0a591e (patch) | |
| tree | ac7adfa56e5c81227e8cd43d91eb8e31bec4513c /src/lib/Loading | |
| parent | feat(skeleton): optimise cards (diff) | |
| download | due.moe-55a28d0f4dc32dc8a096c959053517942a0a591e.tar.xz due.moe-55a28d0f4dc32dc8a096c959053517942a0a591e.zip | |
feat(skeleton): animation delay implementation
Diffstat (limited to 'src/lib/Loading')
| -rw-r--r-- | src/lib/Loading/Skeleton.svelte | 5 |
1 files changed, 3 insertions, 2 deletions
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte index c2df1e3f..08557685 100644 --- a/src/lib/Loading/Skeleton.svelte +++ b/src/lib/Loading/Skeleton.svelte @@ -10,9 +10,9 @@ {#if grid} <div class="grid" style={pad ? 'padding-top: .75em;' : ''}> - {#each Array(count) as _} + {#each Array(count) as _, i} <div class={card ? 'card-small' : ''} style={`width: ${width};`}> - <div class="skeleton-container"> + <div class="skeleton-container" style={`--i: ${i};`}> <div class="skeleton" style={`width: ${width}; height: ${height};`} /> </div> </div> @@ -52,6 +52,7 @@ background-size: 200px 100%; background-repeat: no-repeat; border-radius: 8px; + /* animation-delay: calc(var(--i) * 0.01s); */ } .skeleton { |