diff options
Diffstat (limited to 'src/lib/Skeleton.svelte')
| -rw-r--r-- | src/lib/Skeleton.svelte | 69 |
1 files changed, 0 insertions, 69 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte deleted file mode 100644 index f42e5a75..00000000 --- a/src/lib/Skeleton.svelte +++ /dev/null @@ -1,69 +0,0 @@ -<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> |