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/Ellipsis.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/Ellipsis.svelte')
| -rw-r--r-- | src/lib/Loading/Ellipsis.svelte | 118 |
1 files changed, 59 insertions, 59 deletions
diff --git a/src/lib/Loading/Ellipsis.svelte b/src/lib/Loading/Ellipsis.svelte index dd7800d7..ba1f30b8 100644 --- a/src/lib/Loading/Ellipsis.svelte +++ b/src/lib/Loading/Ellipsis.svelte @@ -1,78 +1,78 @@ <script lang="ts"> - export let colour = 'var(--fg)'; + export let colour = 'var(--fg)'; </script> <div class="ellipsis" style={`--loader-colour: ${colour};`}> - {#each Array.from({ length: 4 }) as _} - <div /> - {/each} + {#each Array.from({ length: 4 }) as _} + <div /> + {/each} </div> <style lang="scss"> - .ellipsis { - display: inline-block; - position: relative; - width: 80px; - height: 80px; + .ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; - div { - position: absolute; - top: 33px; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--loader-colour); - animation-timing-function: cubic-bezier(0, 1, 1, 0); - } - } + div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--loader-colour); + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + } - .ellipsis div:nth-child(1) { - left: 8px; - animation: ellipsis-1 0.6s infinite; - } + .ellipsis div:nth-child(1) { + left: 8px; + animation: ellipsis-1 0.6s infinite; + } - .ellipsis div:nth-child(2) { - left: 8px; - animation: ellipsis-2 0.6s infinite; - } + .ellipsis div:nth-child(2) { + left: 8px; + animation: ellipsis-2 0.6s infinite; + } - .ellipsis div:nth-child(3) { - left: 32px; - animation: ellipsis-2 0.6s infinite; - } + .ellipsis div:nth-child(3) { + left: 32px; + animation: ellipsis-2 0.6s infinite; + } - .ellipsis div:nth-child(4) { - left: 56px; - animation: ellipsis-3 0.6s infinite; - } + .ellipsis div:nth-child(4) { + left: 56px; + animation: ellipsis-3 0.6s infinite; + } - @keyframes ellipsis-1 { - 0% { - transform: scale(0); - } + @keyframes ellipsis-1 { + 0% { + transform: scale(0); + } - 100% { - transform: scale(1); - } - } + 100% { + transform: scale(1); + } + } - @keyframes ellipsis-2 { - 0% { - transform: translate(0, 0); - } + @keyframes ellipsis-2 { + 0% { + transform: translate(0, 0); + } - 100% { - transform: translate(24px, 0); - } - } + 100% { + transform: translate(24px, 0); + } + } - @keyframes ellipsis-3 { - 0% { - transform: scale(1); - } + @keyframes ellipsis-3 { + 0% { + transform: scale(1); + } - 100% { - transform: scale(0); - } - } + 100% { + transform: scale(0); + } + } </style> |