From faf8d3a518283fe67d7bcbedec3ab7b9f9109d9c Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 29 Nov 2022 16:47:46 +0200
Subject: [PATCH] add loading spinner and spinner button
---
frontend/public/global.css | 42 +++++++++++++++++++++
frontend/public/index.html | 5 ++-
frontend/src/components/ActionButton.svelte | 26 +++++++++++++
3 files changed, 72 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/components/ActionButton.svelte
diff --git a/frontend/public/global.css b/frontend/public/global.css
index d827f8a..37936ee 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -25,6 +25,7 @@
--background-color-1: hsl(180, 11%, 5%);
--background-color-2: hsl(180, 11%, 8%);
--background-color-3: hsl(180, 11%, 11%);
+ --background-color-4: hsl(180, 11%, 15%);
--foreground-color-1: hsl(210, 100%, 100%);
--foreground-color-2: hsl(63, 10%, 82%);
--foreground-color-3: hsl(63, 2%, 60%);
@@ -106,6 +107,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
@@ -151,10 +153,12 @@ body {
bottom: 0;
z-index: 15;
background-color: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(1.5px);
}
.modal-backdrop-opaque {
background-color: var(--background-color-1);
+ backdrop-filter: unset;
}
.modal {
@@ -232,6 +236,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
+ flex-shrink: 0;
}
.button:hover {
@@ -264,6 +269,10 @@ body {
background-color: var(--red-2);
}
+.button-danger {
+ color: var(--red-2);
+}
+
/* icon buttons */
.icon-button {
@@ -291,6 +300,39 @@ body {
color: var(--foreground-color-1);
}
+/* spinner */
+
+.spinner {
+ display: inline-block;
+ border: 5px solid hsla(0, 0%, 100%, 0.1);
+ border-left-color: hsla(0, 0%, 100%, 0.3);
+ border-radius: 50%;
+ animation: spinner-fadein 0.3s, spinner-spin 1.1s cubic-bezier(0.77,0,0.18,1) infinite;
+ width: 38px;
+ height: 38px;
+}
+
+.spinner.ui {
+ width: 28px;
+ height: 28px;
+ flex-shrink: 0;
+}
+
+@keyframes spinner-fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes spinner-spin {
+ to {
+ transform: rotate(1turn);
+ }
+}
+
/* text */
.h1 {font-size: 1.802rem;}
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 5f4873e..a309993 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -20,6 +20,9 @@
-
+
+
+
+