diff options
Diffstat (limited to 'src/lib/Loading/Ripple.svelte')
| -rw-r--r-- | src/lib/Loading/Ripple.svelte | 29 |
1 files changed, 17 insertions, 12 deletions
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte index 33e2ab8b..40fa07b8 100644 --- a/src/lib/Loading/Ripple.svelte +++ b/src/lib/Loading/Ripple.svelte @@ -1,26 +1,30 @@ -<div class="ripple"> +<script lang="ts"> + export let colour = 'var(--fg)'; +</script> + +<div class="ripple" style={`--loader-colour: ${colour};`}> <div /> <div /> </div> -<style> +<style lang="scss"> .ripple { display: inline-block; position: relative; width: 80px; height: 80px; - } - .ripple div { - position: absolute; - border: 4px solid #fff; - 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; - .ripple div:nth-child(2) { - animation-delay: -0.5s; + &:nth-child(2) { + animation-delay: -0.5s; + } + } } @keyframes ripple { @@ -31,6 +35,7 @@ height: 0; opacity: 1; } + 100% { top: 0px; left: 0px; |