diff options
| author | Fuwn <[email protected]> | 2024-05-20 15:10:30 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-05-20 15:10:30 -0700 |
| commit | c81cfed88405c0050c6673097187bb128d248998 (patch) | |
| tree | 7004637ae2b4e7bf780c58b95974c48207a4813f | |
| parent | fix(badges): null check preferences (diff) | |
| download | due.moe-c81cfed88405c0050c6673097187bb128d248998.tar.xz due.moe-c81cfed88405c0050c6673097187bb128d248998.zip | |
feat(skeleton): animation delay
| -rw-r--r-- | src/lib/Loading/Skeleton.svelte | 4 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 1 |
2 files changed, 3 insertions, 2 deletions
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte index 9293a3a6..3849b24d 100644 --- a/src/lib/Loading/Skeleton.svelte +++ b/src/lib/Loading/Skeleton.svelte @@ -23,7 +23,7 @@ {#each Array(count) as _, i} <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} - style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}`} + style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`} > <div class="skeleton-container"> <div class="skeleton" style={`width: ${width}; height: ${height};`} /> @@ -53,7 +53,7 @@ background-size: 200px 100%; background-repeat: no-repeat; border-radius: 8px; - /* animation-delay: calc(var(--i) * 0.01s); */ + animation-delay: calc(var(--i) * 0.025s); } .skeleton { diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index b507eeca..7d892a31 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -14,6 +14,7 @@ import LogInRestricted from '$lib/Error/LogInRestricted.svelte'; import SettingSync from '$lib/Settings/Categories/SettingSync.svelte'; import RssFeeds from '$lib/Settings/Categories/RSSFeeds.svelte'; + import Skeleton from '$lib/Loading/Skeleton.svelte'; export let data; |