material spinner and challenges loader
This commit is contained in:
parent
17edc5067c
commit
d3cd4d3ea9
|
@ -1,7 +1,7 @@
|
||||||
#challenge_app {
|
#challenge_app {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
left: -95px;
|
left: -104px;
|
||||||
background: transparent!important;
|
background: transparent!important;
|
||||||
box-shadow: none!important;
|
box-shadow: none!important;
|
||||||
border: 0!important;
|
border: 0!important;
|
||||||
|
@ -120,7 +120,8 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#challenge_app .empty {
|
#challenge_app .empty,
|
||||||
|
#challenge_app .initiating {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
|
@ -369,6 +369,34 @@ div.content_box .loader:after {
|
||||||
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
|
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
|
||||||
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
|
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
|
||||||
}
|
}
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.spinner svg {
|
||||||
|
animation: spinnerRotate 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
.spinner circle {
|
||||||
|
fill: transparent;
|
||||||
|
stroke: #42a5f5;
|
||||||
|
stroke-width: 4;
|
||||||
|
animation: spinnerDash 1.275s ease-in-out infinite, spinnerColor 5.1s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spinnerRotate {
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes spinnerDash {
|
||||||
|
0%,10% { stroke-dasharray: 1,270; stroke-dashoffset: 0 }
|
||||||
|
40% { stroke-dasharray: 89,240; stroke-dashoffset: 0 }
|
||||||
|
100% { stroke-dasharray: 1,240; stroke-dashoffset: -110 }
|
||||||
|
}
|
||||||
|
@keyframes spinnerColor {
|
||||||
|
0%,20%,100% { stroke: #42a5f5 }
|
||||||
|
30%,45% { stroke: #f44336 }
|
||||||
|
50%,70% { stroke: #fdd835 }
|
||||||
|
75%,95% { stroke: #4caf50 }
|
||||||
|
}
|
||||||
#powerTip,
|
#powerTip,
|
||||||
#hook,
|
#hook,
|
||||||
#miniGame {
|
#miniGame {
|
||||||
|
|
|
@ -270,6 +270,7 @@ body.dark .lichess_ground .replay move:not(.empty):hover,
|
||||||
body.dark #top .dropdown,
|
body.dark #top .dropdown,
|
||||||
body.dark #challenge_app div.challenge,
|
body.dark #challenge_app div.challenge,
|
||||||
body.dark #challenge_app div.empty,
|
body.dark #challenge_app div.empty,
|
||||||
|
body.dark #challenge_app div.initiating,
|
||||||
body.dark #top .shown a.toggle,
|
body.dark #top .shown a.toggle,
|
||||||
body.dark div.analysis_menu > a,
|
body.dark div.analysis_menu > a,
|
||||||
body.dark div.lichess_overboard,
|
body.dark div.lichess_overboard,
|
||||||
|
|
|
@ -112,8 +112,24 @@ function empty(ctrl, d) {
|
||||||
return m('div.empty.text[data-icon=]', 'No challenges.');
|
return m('div.empty.text[data-icon=]', 'No challenges.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function spinner() {
|
||||||
|
return m('div.spinner',
|
||||||
|
m('svg', {
|
||||||
|
viewBox: '0 0 40 40'
|
||||||
|
}, m('circle', {
|
||||||
|
cx: 20,
|
||||||
|
cy: 20,
|
||||||
|
r: 18,
|
||||||
|
fill: 'none'
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
|
||||||
|
function initiating() {
|
||||||
|
return m('div.initiating', spinner());
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = function(ctrl) {
|
module.exports = function(ctrl) {
|
||||||
if (ctrl.vm.initiating) return m('div.square-wrap', m('div.square-spin'));
|
if (ctrl.vm.initiating) return initiating();
|
||||||
var d = ctrl.data;
|
var d = ctrl.data;
|
||||||
var nb = d.in.length + d.out.length;
|
var nb = d.in.length + d.out.length;
|
||||||
return nb ? allChallenges(ctrl, d, nb) : empty(ctrl);
|
return nb ? allChallenges(ctrl, d, nb) : empty(ctrl);
|
||||||
|
|
Loading…
Reference in a new issue