diff options
| author | Fuwn <[email protected]> | 2024-01-24 21:08:08 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-24 21:08:08 -0800 |
| commit | 2e2ec9878c7bb71c1a3d6276653a7ae4e193193d (patch) | |
| tree | a3022fe61708068031f57e4cc6f90018ddebfc55 /src/lib | |
| parent | feat(identity): use global store (diff) | |
| download | due.moe-2e2ec9878c7bb71c1a3d6276653a7ae4e193193d.tar.xz due.moe-2e2ec9878c7bb71c1a3d6276653a7ae4e193193d.zip | |
feat(layout): skeleton ui on load
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Skeleton.svelte | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte new file mode 100644 index 00000000..5db5fb0b --- /dev/null +++ b/src/lib/Skeleton.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + export let count = 3; +</script> + +{#each Array(count) as _, i} + <div class="card card-small"> + <div class="skeleton-container"> + <div class="skeleton" /> + </div> + </div> + + {#if i < count - 1} + <p /> + {/if} +{/each} + +<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 { + height: 100px; + border-radius: 4px; + display: inline-block; + line-height: 1; + width: 100%; + } +</style> |