aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Loading/Grid.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-09 00:41:20 -0700
committerFuwn <[email protected]>2024-10-09 00:41:43 -0700
commit998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch)
tree50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Loading/Grid.svelte
parentfeat(graphql): add badgeCount field (diff)
downloaddue.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.svelte98
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>