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/Ripple.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/Ripple.svelte')
| -rw-r--r-- | src/lib/Loading/Ripple.svelte | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte index 40fa07b8..05d62bb5 100644 --- a/src/lib/Loading/Ripple.svelte +++ b/src/lib/Loading/Ripple.svelte @@ -1,47 +1,47 @@ <script lang="ts"> - export let colour = 'var(--fg)'; + export let colour = 'var(--fg)'; </script> <div class="ripple" style={`--loader-colour: ${colour};`}> - <div /> - <div /> + <div /> + <div /> </div> <style lang="scss"> - .ripple { - display: inline-block; - position: relative; - width: 80px; - height: 80px; + .ripple { + display: inline-block; + position: relative; + width: 80px; + height: 80px; - div { - position: absolute; - border: 4px solid var(--loader-colour); - opacity: 1; - border-radius: 50%; - animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + div { + position: absolute; + border: 4px solid var(--loader-colour); + opacity: 1; + border-radius: 50%; + animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; - &:nth-child(2) { - animation-delay: -0.5s; - } - } - } + &:nth-child(2) { + animation-delay: -0.5s; + } + } + } - @keyframes ripple { - 0% { - top: 36px; - left: 36px; - width: 0; - height: 0; - opacity: 1; - } + @keyframes ripple { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } - 100% { - top: 0px; - left: 0px; - width: 72px; - height: 72px; - opacity: 0; - } - } + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } + } </style> |