diff options
| author | Fuwn <[email protected]> | 2024-01-31 00:57:18 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-31 00:57:18 -0800 |
| commit | dc760040587dcf9946898a45ef47db2fcde22d6a (patch) | |
| tree | f56ab76b2e8194977ac0264b6bbf0c675dfb132d /src/lib/Loading | |
| parent | fix(anime): check identity stage for lists (diff) | |
| download | due.moe-dc760040587dcf9946898a45ef47db2fcde22d6a.tar.xz due.moe-dc760040587dcf9946898a45ef47db2fcde22d6a.zip | |
refactor(skeleton): move to loading module
Diffstat (limited to 'src/lib/Loading')
| -rw-r--r-- | src/lib/Loading/Skeleton.svelte | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte new file mode 100644 index 00000000..f42e5a75 --- /dev/null +++ b/src/lib/Loading/Skeleton.svelte @@ -0,0 +1,69 @@ +<script lang="ts"> + export let count = 3; + export let width = '100%'; + export let height = '100px'; + export let card = true; + export let grid = false; + export let list = false; + export let pad = false; +</script> + +{#if grid} + <div class="grid" style={pad ? 'padding-top: .75em;' : ''}> + {#each Array(count) as _} + <div class={card ? 'card card-small' : ''} style={`width: ${width};`}> + <div class="skeleton-container"> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> + </div> + </div> + {/each} + </div> +{:else} + {#each Array(count) as _, i} + <div + class={card ? 'card card-small' : ''} + style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}`} + > + <div class="skeleton-container"> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> + </div> + </div> + + {#if !list && i < count - 1} + <p /> + {/if} + {/each} +{/if} + +<style> + @keyframes progress { + 0% { + background-position: -200px 0; + } + 100% { + background-position: calc(200px + 100%) 0; + } + } + + .skeleton-container { + animation: progress 1.2s ease-in-out infinite; + background-color: var(--base001); + background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011)); + background-size: 200px 100%; + background-repeat: no-repeat; + border-radius: 8px; + } + + .skeleton { + border-radius: 4px; + display: inline-block; + line-height: 1; + } + + .grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + row-gap: 1em; + } +</style> |