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/Grid.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/Grid.svelte')
| -rw-r--r-- | src/lib/Loading/Grid.svelte | 98 |
1 files changed, 49 insertions, 49 deletions
diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte index 6fff4da0..1a64b3e0 100644 --- a/src/lib/Loading/Grid.svelte +++ b/src/lib/Loading/Grid.svelte @@ -1,57 +1,57 @@ <script lang="ts"> - export let colour = 'var(--fg)'; + export let colour = 'var(--fg)'; </script> <div class="grid" style={`--loader-colour: ${colour};`}> - {#each Array.from({ length: 9 }) as _} - <div /> - {/each} + {#each Array.from({ length: 9 }) as _} + <div /> + {/each} </div> <style lang="scss"> - .grid { - display: inline-block; - position: relative; - width: 64px; - height: 64px; - - div { - position: absolute; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--loader-colour); - animation: grid 1.2s linear infinite; - } - } - - @function column($i) { - @if $i % 3 == 0 { - @return 3; - } @else { - @return $i % 3; - } - } - - @for $i from 1 through 9 { - .grid div:nth-child(#{$i}) { - $row: ceil(calc($i / 3)); - $column: column($i); - - top: 6px + ($row - 1) * 20px; - left: 6px + ($column - 1) * 20px; - animation-delay: -0.4s * ($i - 1); - } - } - - @keyframes grid { - 0%, - 100% { - opacity: 1; - } - - 50% { - opacity: 0.5; - } - } + .grid { + display: inline-block; + position: relative; + width: 64px; + height: 64px; + + div { + position: absolute; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--loader-colour); + animation: grid 1.2s linear infinite; + } + } + + @function column($i) { + @if $i % 3 == 0 { + @return 3; + } @else { + @return $i % 3; + } + } + + @for $i from 1 through 9 { + .grid div:nth-child(#{$i}) { + $row: ceil(calc($i / 3)); + $column: column($i); + + top: 6px + ($row - 1) * 20px; + left: 6px + ($column - 1) * 20px; + animation-delay: -0.4s * ($i - 1); + } + } + + @keyframes grid { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } + } </style> |