aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Loading/Ellipsis.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/Ellipsis.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/Ellipsis.svelte')
-rw-r--r--src/lib/Loading/Ellipsis.svelte118
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>