isledecomp/isle.pizza
1
0
Fork 0
mirror of https://github.com/isledecomp/isle.pizza.git synced 2026-03-01 14:27:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add spinning loader while loading score cube

Browse Source
This commit is contained in:
Christian Semmler 2026-01-31 13:59:59 -08:00
parent 257ebd9d58
commit eb5604f1de
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/save-editor/ScoreCube.svelte
View File

@ -151,7 +151,9 @@
></canvas> ></canvas>
{#if loading} {#if loading}
<div class="overlay">Loading score cube...</div> <div class="overlay">
<div class="spinner"></div>
</div>
{:else if error} {:else if error}
<div class="overlay error">Error: {error}</div> <div class="overlay error">Error: {error}</div>
{/if} {/if}
@ -191,15 +193,31 @@
justify-content: center; justify-content: center;
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 8px; padding-top: 20px;
background: var(--color-bg-secondary, #1a1a2e);
color: var(--color-text-muted, #888); color: var(--color-text-muted, #888);
font-size: 0.9em; font-size: 0.9em;
} }
.overlay.error { .overlay.error {
background: var(--color-bg-secondary, #1a1a2e);
border-radius: 8px;
color: var(--color-error, #e74c3c); color: var(--color-error, #e74c3c);
padding: 16px; padding: 16px;
text-align: center; text-align: center;
} }
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
background:
radial-gradient(transparent 55%, transparent 56%),
conic-gradient(var(--color-primary, #FFD700) 0deg 90deg, var(--color-border-dark, #333) 90deg 360deg);
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style> </style>