material spinner and challenges loader

public/stylesheets/challengeApp.css

@@ -1,7 +1,7 @@
 #challenge_app {
   width: 250px;
   z-index: 2;
-  left: -95px;
+  left: -104px;
   background: transparent!important;
   box-shadow: none!important;
   border: 0!important;
@@ -120,7 +120,8 @@
   opacity: 1;
 }
 
-#challenge_app .empty {
+#challenge_app .empty,
+#challenge_app .initiating {
   text-align: center;
   padding: 20px 0;
   background: #fff;

public/stylesheets/common.css

@@ -369,6 +369,34 @@ div.content_box .loader:after {
   75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
   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,
 #hook,
 #miniGame {
@@ -2569,7 +2597,7 @@ input.cmn-toggle-round:checked + label:after {
   border-left: 1.5px solid #aaa;
   border-bottom: 1px solid #aaa;
   -webkit-transform: skew(45deg) rotate(-45deg);
-          transform: skew(45deg) rotate(-45deg);
+  transform: skew(45deg) rotate(-45deg);
 }
 .content_box .pull-quote p:after,
 .lichess_overboard .pull-quote p:after {

public/stylesheets/dark.css

@@ -270,6 +270,7 @@ body.dark .lichess_ground .replay move:not(.empty):hover,
 body.dark #top .dropdown,
 body.dark #challenge_app div.challenge,
 body.dark #challenge_app div.empty,
+body.dark #challenge_app div.initiating,
 body.dark #top .shown a.toggle,
 body.dark div.analysis_menu > a,
 body.dark div.lichess_overboard,

ui/challenge/src/view.js

@@ -112,8 +112,24 @@ function empty(ctrl, d) {
   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) {
-  if (ctrl.vm.initiating) return m('div.square-wrap', m('div.square-spin'));
+  if (ctrl.vm.initiating) return initiating();
   var d = ctrl.data;
   var nb = d.in.length + d.out.length;
   return nb ? allChallenges(ctrl, d, nb) : empty(ctrl);