Replace loading spinner with lichess logo
Albert Ford
parent
3bfe5e0412
commit
83581f653e
|
|
@ -51,6 +51,6 @@ object Environment
|
|||
)
|
||||
|
||||
val spinner: Frag = raw(
|
||||
"""<div class="spinner"><svg viewBox="0 0 40 40"><circle cx=20 cy=20 r=18 fill="none"></circle></svg></div>"""
|
||||
"""<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>"""
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -170,6 +170,10 @@ object layout {
|
|||
ctx.pageData.inquiry.isDefined option jsTag("inquiry.js")
|
||||
)
|
||||
|
||||
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>"""
|
||||
)
|
||||
|
||||
private val spaceRegex = """\s{2,}+""".r
|
||||
private def spaceless(html: String) = raw(spaceRegex.replaceAllIn(html.replace("\\n", ""), ""))
|
||||
|
||||
|
|
@ -303,6 +307,7 @@ object layout {
|
|||
)
|
||||
),
|
||||
a(id := "reconnecting", cls := "link text", dataIcon := "")(trans.reconnecting()),
|
||||
spinnerMask,
|
||||
loadScripts(moreJs, chessground)
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,48 +1,46 @@
|
|||
/* circular loader */
|
||||
@keyframes spinner-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
@keyframes mask1 {
|
||||
0% {
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
17.86% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner-dash {
|
||||
0%,
|
||||
10% {
|
||||
stroke-dasharray: 1, 270;
|
||||
stroke-dashoffset: 0;
|
||||
@keyframes mask2 {
|
||||
0% {
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
40% {
|
||||
stroke-dasharray: 89, 240;
|
||||
stroke-dashoffset: 0;
|
||||
17.86% {
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 1, 240;
|
||||
stroke-dashoffset: -110;
|
||||
31.43% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner-color {
|
||||
0%,
|
||||
20%,
|
||||
100% {
|
||||
stroke: #42a5f5;
|
||||
@keyframes mask3 {
|
||||
0% {
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
30%,
|
||||
45% {
|
||||
stroke: #f44336;
|
||||
31.43% {
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
50%,
|
||||
70% {
|
||||
stroke: #fdd835;
|
||||
85% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
75%,
|
||||
95% {
|
||||
stroke: #4caf50;
|
||||
#mask {
|
||||
path:nth-child(1) {
|
||||
animation: mask1 2s cubic-bezier(0.417, 0.086, 0.741, 0.452) infinite;
|
||||
}
|
||||
path:nth-child(2) {
|
||||
animation: mask2 2s cubic-bezier(0.333, 0.317, 0.621, 0.661) infinite;
|
||||
}
|
||||
path:nth-child(3) {
|
||||
animation: mask3 2s cubic-bezier(0, 0, 0.431, 1) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,18 +49,8 @@
|
|||
height: 70px;
|
||||
margin: auto;
|
||||
|
||||
svg {
|
||||
animation: spinner-rotate 1.5s linear infinite;
|
||||
}
|
||||
|
||||
circle {
|
||||
stroke: #42a5f5;
|
||||
stroke-width: 4;
|
||||
animation: spinner-dash 1.275s ease-in-out infinite, spinner-color 5.1s linear infinite;
|
||||
}
|
||||
|
||||
.white & circle {
|
||||
animation: spinner-dash 1.275s ease-in-out infinite;
|
||||
.white & path {
|
||||
fill: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,15 @@ export default function (): VNode {
|
|||
'aria-label': 'loading',
|
||||
},
|
||||
[
|
||||
h('svg', { attrs: { viewBox: '0 0 40 40' } }, [
|
||||
h('circle', {
|
||||
attrs: { cx: 20, cy: 20, r: 18, fill: 'none' },
|
||||
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',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const spinner =
|
||||
'<div class="spinner"><svg viewBox="0 0 40 40"><circle cx=20 cy=20 r=18 fill="none"></circle></svg></div>';
|
||||
'<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>';
|
||||
|
||||
export default spinner;
|
||||
|
|
|
|||
Loading…
Reference in New Issue