MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): proper loader

This commit is contained in:
ArneBo 2025-04-02 03:01:46 +02:00
parent f1c2969116
commit efe5674d04
2 changed files with 54 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/components/ui/Loader.vue
View File

@ -7,14 +7,14 @@ const { container = true } = defineProps<{ container?: boolean }>()
v-if="container" v-if="container"
class="funkwhale loader-container" class="funkwhale loader-container"
> >
<div class="funkwhale loader"> <div class="funkwhale">
<div class="loader" /> <div class="loader" />
</div> </div>
</div> </div>
<div <div
v-else v-else
class="funkwhale loader" class="funkwhale"
> >
<div class="loader" /> <div class="loader" />
</div> </div>

84
front/src/components/ui/loader.scss
View File

@ -1,60 +1,62 @@
// Modified version of https://github.com/lukehaas/css-loaders
.funkwhale { .funkwhale {
&.loader-container { &.loader-container {
position: relative; position: relative;
height: 100%; height: 100%;
}
&.loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
font-size: 1.2em; .loader,
.loader:after {
// Modified version of https://github.com/lukehaas/css-loaders
> .loader,
> .loader:after {
border-radius: 50%; border-radius: 50%;
width: 1em; width: 1.5em;
height: 1em; height: 1.5em;
} }
.loader {
> .loader:after { font-size: 1.2em;
content: '';
position: absolute;
display: block;
border: .11em solid currentColor;
opacity: 0.2;
margin-left: -0.11em;
margin-top: -0.11em;
}
> .loader {
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
font-size: 1em;
border-top: .11em solid transparent; @include light-theme {
border-right: .11em solid transparent; border-top: 0.2em solid rgba(0, 0, 0, 0.2);
border-bottom: .11em solid transparent; border-right: 0.2em solid rgba(0, 0, 0, 0.2);
border-left: .11em solid currentColor; border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
border-left: 0.2em solid rgba(0, 0, 0, 0.7);
}
will-change: transform; @include dark-theme {
border-top: 0.2em solid rgba(255, 255, 255, 0.2);
border-right: 0.2em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
border-left: 0.2em solid rgba(255, 255, 255, 0.7);
}
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 .5s infinite linear;
animation: load8 .5s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
animation: rotate .5s infinite linear; }
100% {
@keyframes rotate { -webkit-transform: rotate(360deg);
0% { transform: rotate(0deg); } transform: rotate(360deg);
100% { transform: rotate(360deg); }
} }
} }
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
} }