hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add loading spinner and spinner button

Browse source
This commit is contained in:
hippoz 2022-11-29 16:47:46 +02:00
parent 050374204e
commit faf8d3a518
No known key found for this signature in database
GPG key ID: 7C52899193467641
3 changed files with 72 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/public/global.css
View file

@ -25,6 +25,7 @@
--background-color-1: hsl(180, 11%, 5%); --background-color-1: hsl(180, 11%, 5%);
--background-color-2: hsl(180, 11%, 8%); --background-color-2: hsl(180, 11%, 8%);
--background-color-3: hsl(180, 11%, 11%); --background-color-3: hsl(180, 11%, 11%);
--background-color-4: hsl(180, 11%, 15%);
--foreground-color-1: hsl(210, 100%, 100%); --foreground-color-1: hsl(210, 100%, 100%);
--foreground-color-2: hsl(63, 10%, 82%); --foreground-color-2: hsl(63, 10%, 82%);
--foreground-color-3: hsl(63, 2%, 60%); --foreground-color-3: hsl(63, 2%, 60%);
@ -106,6 +107,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -151,10 +153,12 @@ body {
bottom: 0; bottom: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(1.5px);
} }
.modal-backdrop-opaque { .modal-backdrop-opaque {
background-color: var(--background-color-1); background-color: var(--background-color-1);
backdrop-filter: unset;
} }
.modal { .modal {
@ -232,6 +236,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.button:hover { .button:hover {
@ -264,6 +269,10 @@ body {
background-color: var(--red-2); background-color: var(--red-2);
} }
.button-danger {
color: var(--red-2);
}
/* icon buttons */ /* icon buttons */
.icon-button { .icon-button {
@ -291,6 +300,39 @@ body {
color: var(--foreground-color-1); 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 */ /* text */
.h1 {font-size: 1.802rem;} .h1 {font-size: 1.802rem;}

5
frontend/public/index.html
View file

@ -20,6 +20,9 @@
</head> </head>
<body> <body>
<div class="sidebar-container" id="pre--loading-screen"><noscript><span>please enable javascript to use this app</span></noscript></div> <div class="fullscreen-message" id="pre--loading-screen">
<div class="spinner"></div>
<noscript><span>please enable javascript to use this app</span></noscript>
</div>
</body> </body>
</html> </html>

26
frontend/src/components/ActionButton.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let action;
export let accent = false;
export let classes = "";
let effectiveClasses = (accent ? "button button-accent" : "button") + " " + classes;
let loading = false;
const handleClick = async () => {
if (loading) {
return;
}
loading = true;
await action();
loading = false;
};
</script>
<button class="{effectiveClasses}" disabled={ loading } on:click={ handleClick }>
{#if loading}
<div class="spinner ui"></div>
{:else}
<slot></slot>
{/if}
</button>