diff options
Diffstat (limited to 'src/lib/Loading/Ripple.svelte')
| -rw-r--r-- | src/lib/Loading/Ripple.svelte | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte new file mode 100644 index 00000000..33e2ab8b --- /dev/null +++ b/src/lib/Loading/Ripple.svelte @@ -0,0 +1,42 @@ +<div class="ripple"> + <div /> + <div /> +</div> + +<style> + .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; + } + + .ripple div:nth-child(2) { + animation-delay: -0.5s; + } + + @keyframes ripple { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } + } +</style> |