Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: use 5582262.png image for loader instead of CSS animation

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-01-24 21:26:04 -05:00
parent b19f08b0d4
commit 97b1d51734
1 changed files with 9 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
themes/lucentui/css/app.css
View File

@@ -636,43 +636,28 @@ x-navigation-link svg {
.loader {
display: inline-block;
width: 1em;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid var(--primary, #514b82);
animation:
l20-1 0.8s infinite linear alternate,
l20-2 1.6s infinite linear;
height: 1em;
background: url('/themes/lucentui/5582262.png') no-repeat center/contain;
animation: loader-spin 1s linear infinite;
}
/* Use currentColor variant when inside colored buttons */
/* Use filter to match button text color when inside colored buttons */
.loader-inherit {
border-color: currentColor;
filter: brightness(0) invert(1);
}
.loader-sm {
width: 0.875em;
height: 0.875em;
}
.loader-lg {
width: 1.25em;
border-width: 3px;
height: 1.25em;
}
@keyframes l20-1 {
0% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
25% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
50% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); }
100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); }
}
@keyframes l20-2 {
0% { transform: scaleY(1) rotate(0deg); }
49.99% { transform: scaleY(1) rotate(135deg); }
50% { transform: scaleY(-1) rotate(0deg); }
100% { transform: scaleY(-1) rotate(-135deg); }
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
/* =============================================================================