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

style: replace simple spinner with animated loader

Browse Source 
- Add new .loader CSS class with clip-path animation
- Uses loader-clip and loader-rotate keyframe animations
- Replaces border-spinner with more polished visual effect
- Applied across storage, firewall, backups, overview, subdomain views
This commit is contained in:
Joseph.Rawlings
2026-01-24 21:06:16 -05:00
parent f4828be3be
commit 46dcab5519
6 changed files with 56 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -629,6 +629,46 @@ x-navigation-link svg {
100% { background-position: -200% 0; }
}
/* =============================================================================
BUTTON LOADING SPINNER
============================================================================= */
.loader {
width: 1em;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid currentColor;
animation:
loader-clip 0.8s infinite linear alternate,
loader-rotate 1.6s infinite linear;
}
.loader-sm {
width: 0.875em;
}
.loader-lg {
width: 1.25em;
border-width: 3px;
}
@keyframes loader-clip {
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 loader-rotate {
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); }
}
/* =============================================================================
CRITICAL PERFORMANCE FIXES
============================================================================= */