Alexander/WebtreesBockenTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace fa-spinner with rounded SVG ring spinner

Browse Source 
Webtrees 2.2.6 introduced .wt-icon-spinner wrapping a FontAwesome
fa-spinner. Replaces it (and the existing .wt-ajax-load Bootstrap
spinner-border) with a single rounded-cap SVG arc tinted via
--bs-primary. Hides FA's JS-injected <svg> child so only the new
spinner renders.
This commit is contained in:
Alexander Bocken
2026-05-15 20:34:06 +02:00
parent fdc29091ac
commit 592acf5161
2 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/theme.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/scss/theme.scss
+37 -2
View File
@@ -533,14 +533,49 @@ select {
}
}
@keyframes wt-spin {
to { transform: rotate(360deg); }
}
$wt-spinner-svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-dasharray='89.54 29.85'/%3E%3C/svg%3E";
.wt-icon-spinner {
display: block;
width: 3rem;
height: 3rem;
margin-inline: auto;
color: var(--bs-primary);
> * { display: none !important; }
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
mask: url($wt-spinner-svg) center / contain no-repeat;
-webkit-mask: url($wt-spinner-svg) center / contain no-repeat;
animation: wt-spin 0.9s linear infinite;
}
}
[dir] .wt-ajax-load:empty {
height: 2rem;
height: 3rem;
position: relative;
&::before {
content: '';
position: absolute;
left: 50%;
@extend .spinner-border;
top: 0;
width: 3rem;
height: 3rem;
margin-left: -1.5rem;
background-color: var(--bs-primary);
mask: url($wt-spinner-svg) center / contain no-repeat;
-webkit-mask: url($wt-spinner-svg) center / contain no-repeat;
animation: wt-spin 0.9s linear infinite;
}
}