switch crypto implementation and add spinner

2023-05-08 22:13:08 -07:00
parent e866a4a643
commit ddd1005067
11 changed files with 387 additions and 43 deletions
--- a/src/ui/Spinner.svelte
+++ b/src/ui/Spinner.svelte
@ -0,0 +1,113 @@
+<script>
+    export let color = 'base-content';
+    export let thickness = '2px';
+    let classes = '';
+    export { classes as class };
+
+    const colorVars = {
+        'primary': 'p',
+        'primary-focus': 'pf',
+        'primary-content': 'pc',
+        'secondary': 's',
+        'secondary-focus': 'sf',
+        'secondary-content': 'sc',
+        'accent': 'a',
+        'accent-focus': 'af',
+        'accent-content': 'ac',
+        'neutral': 'n',
+        'neutral-focus': 'nf',
+        'neutral-content': 'nc',
+        'base-100': 'b1',
+        'base-200': 'b2',
+        'base-300': 'b3',
+        'base-content': 'bc',
+        'info': 'in',
+        'info-content': 'inc',
+        'success': 'su',
+        'success-content': 'suc',
+        'warning': 'wa',
+        'warning-content': 'wac',
+        'error': 'er',
+        'error-content': 'erc',
+    }
+
+    let arcStyle = `border-width: ${thickness};`;
+    arcStyle += `border-color: hsl(var(--${colorVars[color]})) transparent transparent transparent;`;
+</script>
+
+<style>
+    #spinner {
+        position: relative;
+
+        animation: spin;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    @keyframes spin {
+        50% { transform: rotate(225deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .arc {
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 9999px;
+    }
+
+    .arc-top {
+        transform: rotate(-45deg);
+    }
+
+    .arc-right {
+        animation: spin-right;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+    }
+
+    .arc-bottom {
+        animation: spin-bottom;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+    }
+
+    .arc-left {
+        animation: spin-left;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes spin-top {
+        0% { transform: rotate(-45deg); }
+        50% { transform: rotate(315deg); }
+        100% { transform: rotate(-45deg); }
+    }
+
+    @keyframes spin-right {
+        0% { transform: rotate(45deg); }
+        50% { transform: rotate(315deg); }
+        100% { transform: rotate(405deg); }
+    }
+
+    @keyframes spin-bottom {
+        0% { transform: rotate(135deg); }
+        50% { transform: rotate(315deg); }
+        100% { transform: rotate(495deg); }
+    }
+
+    @keyframes spin-left {
+        0% { transform: rotate(225deg); }
+        50% { transform: rotate(315deg); }
+        100% { transform: rotate(585deg); }
+    }
+</style>
+
+
+<div id="spinner" class="w-6 h-6 {classes}">
+    <div class="arc arc-top w-full h-full" style={arcStyle}></div>
+    <div class="arc arc-right w-full h-full" style={arcStyle}></div>
+    <div class="arc arc-bottom w-full h-full" style={arcStyle}></div>
+    <div class="arc arc-left w-full h-full" style={arcStyle}></div>
+</div>