diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Loading/Skeleton.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Loading/Skeleton.svelte')
| -rw-r--r-- | src/lib/Loading/Skeleton.svelte | 116 |
1 files changed, 58 insertions, 58 deletions
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte index 3849b24d..3f39beec 100644 --- a/src/lib/Loading/Skeleton.svelte +++ b/src/lib/Loading/Skeleton.svelte @@ -1,71 +1,71 @@ <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; - export let bigCard = false; + 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; + export let bigCard = false; </script> {#if grid} - <div class="grid" style={pad ? 'padding-top: .75em;' : ''}> - {#each Array(count) as _, i} - <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}> - <div class="skeleton-container" style={`--i: ${i};`}> - <div class="skeleton" style={`width: ${width}; height: ${height};`} /> - </div> - </div> - {/each} - </div> + <div class="grid" style={pad ? 'padding-top: .75em;' : ''}> + {#each Array(count) as _, i} + <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}> + <div class="skeleton-container" style={`--i: ${i};`}> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> + </div> + </div> + {/each} + </div> {:else} - {#each Array(count) as _, i} - <div - class={card ? `${bigCard ? 'card' : ''} card-small` : ''} - style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`} - > - <div class="skeleton-container"> - <div class="skeleton" style={`width: ${width}; height: ${height};`} /> - </div> - </div> + {#each Array(count) as _, i} + <div + class={card ? `${bigCard ? 'card' : ''} card-small` : ''} + style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`} + > + <div class="skeleton-container"> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> + </div> + </div> - {#if !list && i < count - 1} - <p /> - {/if} - {/each} + {#if !list && i < count - 1} + <p /> + {/if} + {/each} {/if} <style> - @keyframes progress { - 0% { - background-position: -200px 0; - } - 100% { - background-position: calc(200px + 100%) 0; - } - } + @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; - animation-delay: calc(var(--i) * 0.025s); - } + .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; + animation-delay: calc(var(--i) * 0.025s); + } - .skeleton { - border-radius: 4px; - display: inline-block; - line-height: 1; - } + .skeleton { + border-radius: 4px; + display: inline-block; + line-height: 1; + } - .grid { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 1em 0.5em; - } + .grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 1em 0.5em; + } </style> |