diff options
| author | Fuwn <[email protected]> | 2024-01-24 21:36:09 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-24 21:36:09 -0800 |
| commit | 19bc63e7c7ef3673d1abe485a54e20cd798049fd (patch) | |
| tree | 26ce8807d7b41f1af9e5071c169ebd8e5c786ad9 /src/lib | |
| parent | feat(user): skeleton loading (diff) | |
| download | due.moe-19bc63e7c7ef3673d1abe485a54e20cd798049fd.tar.xz due.moe-19bc63e7c7ef3673d1abe485a54e20cd798049fd.zip | |
feat(skeleton): grid skeleton
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Skeleton.svelte | 37 |
1 files changed, 28 insertions, 9 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte index 839d7985..7a278429 100644 --- a/src/lib/Skeleton.svelte +++ b/src/lib/Skeleton.svelte @@ -3,19 +3,32 @@ export let width = '100%'; export let height = '100px'; export let card = true; + export let grid = false; </script> -{#each Array(count) as _, i} - <div class={card ? 'card card-small' : ''} style={`width: ${width};`}> - <div class="skeleton-container"> - <div class="skeleton" style={`width: ${width}; height: ${height};`} /> - </div> +{#if grid} + <div class="grid"> + {#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};`}> + <div class="skeleton-container"> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> + </div> + </div> - {#if i < count - 1} - <p /> - {/if} -{/each} + {#if i < count - 1} + <p /> + {/if} + {/each} +{/if} <style> @keyframes progress { @@ -41,4 +54,10 @@ display: inline-block; line-height: 1; } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 1rem; + } </style> |