deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

Swap spinner mask and content 

This avoids animating the mask.
Intended to fix stuttering animation on Safari.
pull/9826/head
Albert Ford 2021-09-17 14:37:32 -07:00
parent 83581f653e
commit f7ea36dd4b
No known key found for this signature in database
GPG Key ID: 9C200032321A04A3
5 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/templating/Environment.scala
View File

@ -51,6 +51,6 @@ object Environment
)
val spinner: Frag = raw(
"""<div class="spinner"><svg viewBox="-2 -2 54 54"><path mask="url(#mask)" fill="#888" stroke="#888" stroke-linejoin="round" d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z"/></svg></div>"""
"""<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none" stroke="#888" stroke-dasharray="1"><path id="a" pathLength="1" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" pathLength="1" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" pathLength="1" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>"""
)
}

2
app/views/base/layout.scala
View File

@ -171,7 +171,7 @@ object layout {
)
private val spinnerMask = raw(
"""<svg><mask id="mask"><g fill="none" stroke="white" stroke-dasharray="1"><path id="a" pathLength="1" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" pathLength="1" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" pathLength="1" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></mask></svg>"""
"""<svg><mask id="mask"><path fill="#fff" stroke="#fff" stroke-linejoin="round" d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z"/></mask></svg>"""
)
private val spaceRegex = """\s{2,}+""".r

13
ui/common/css/component/_loader.scss
View File

@ -32,7 +32,11 @@
}
}
#mask {
.spinner {
width: 70px;
height: 70px;
margin: auto;
path:nth-child(1) {
animation: mask1 2s cubic-bezier(0.417, 0.086, 0.741, 0.452) infinite;
}
@ -42,15 +46,8 @@
path:nth-child(3) {
animation: mask3 2s cubic-bezier(0, 0, 0.431, 1) infinite;
}
}
.spinner {
width: 70px;
height: 70px;
margin: auto;
.white & path {
fill: #fff;
stroke: #fff;
}
}

41
ui/common/src/spinner.ts
View File

@ -1,5 +1,20 @@
import { h, VNode } from 'snabbdom';
const pathAttrs = [
{
'stroke-width': 3.779,
d: 'm21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93',
},
{
'stroke-width': 4.157,
d: 'm43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628',
},
{
'stroke-width': 4.535,
d: 'm37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666',
},
];
export default function (): VNode {
return h(
'div.spinner',
@ -8,15 +23,25 @@ export default function (): VNode {
},
[
h('svg', { attrs: { viewBox: '-2 -2 54 54' } }, [
h('path', {
attrs: {
mask: 'url(#mask)',
fill: '#888',
stroke: '#888',
'stroke-linejoin': 'round',
d: 'M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z',
h(
'g',
{
attrs: {
mask: 'url(#mask)',
fill: 'none',
stroke: '#888',
'stroke-dasharray': 1,
},
},
}),
pathAttrs.map(attrs => {
return h('path', {
attrs: {
pathLength: 1, // cannot be inherited from parent group
...attrs,
},
});
})
),
]),
]
);

2
ui/site/src/component/spinner.ts
View File

@ -1,4 +1,4 @@
const spinner =
'<div class="spinner"><svg viewBox="-2 -2 54 54"><path mask="url(#mask)" fill="#888" stroke="#888" stroke-linejoin="round" d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z"/></svg></div>';
'<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none" stroke="#888" stroke-dasharray="1"><path id="a" pathLength="1" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" pathLength="1" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" pathLength="1" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>';
export default spinner;