thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 Wiki Activity

fix: centered spinner on image previews

feat/type-attributes
Tomáš Mládek 2022-12-18 14:02:57 +01:00
parent 0d5e201ff2
commit 881d48ec00
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webui/src/components/display/BlobPreview.svelte
View File

@ -108,7 +108,7 @@
<div class="image" class:loaded={imageLoaded == address || !handled}> <div class="image" class:loaded={imageLoaded == address || !handled}>
{#if handled && imageLoaded != address} {#if handled && imageLoaded != address}
<div class="spinner"> <div class="spinner">
<Spinner centered /> <Spinner centered="absolute" />
</div> </div>
{/if} {/if}
<img <img

15
webui/src/components/utils/Spinner.svelte
View File

@ -1,8 +1,12 @@
<script lang="ts"> <script lang="ts">
export let centered = false; export let centered: boolean | string = false;
</script> </script>
<div class="spinner lds-ripple" class:centered> <div
class="spinner lds-ripple"
class:centered={Boolean(centered)}
class:absolute-centered={centered == "absolute"}
>
<div /> <div />
<div /> <div />
</div> </div>
@ -14,6 +18,13 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.spinner.absolute-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lds-ripple { .lds-ripple {
display: inline-block; display: inline-block;
position: relative; position: relative;