add loader to challenge submit

public/css/main.less

@@ -1177,3 +1177,104 @@ hr {
 //  border-width: 1px;
 //  border-style: solid;
 //}
+
+// source: https://github.com/jlong/css-spinners/blob/master/css/spinner/inner-circles.css
+// license MIT
+/* :not(:required) hides this rule from IE9 and below */
+.inner-circles-loader:not(:required) {
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  position: relative;
+  display: inline-block;
+  width: 125px;
+  height: 125px;
+  background: rgba(25, 165, 152, 0.5);
+  border-radius: 50%;
+  overflow: hidden;
+  text-indent: -9999px;
+  margin-top: 10%;
+  /* Hides inner circles outside base circle at safari */
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+.inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  width: 125px;
+  height: 125px;
+  border-radius: 50%;
+}
+.inner-circles-loader:not(:required):before {
+  -moz-animation: inner-circles-loader 3s infinite;
+  -webkit-animation: inner-circles-loader 3s infinite;
+  animation: inner-circles-loader 3s infinite;
+  -moz-transform-origin: 0 50%;
+  -ms-transform-origin: 0 50%;
+  -webkit-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+  left: 0;
+  background: #c7efcf;
+}
+.inner-circles-loader:not(:required):after {
+  -moz-animation: inner-circles-loader 3s 0.2s reverse infinite;
+  -webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
+  animation: inner-circles-loader 3s 0.2s reverse infinite;
+  -moz-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  -webkit-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+  right: 0;
+  background: #eef5db;
+}
+
+@-moz-keyframes inner-circles-loader {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  50% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  100% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+@-webkit-keyframes inner-circles-loader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  50% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+@keyframes inner-circles-loader {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  50% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  100% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}

public/js/lib/coursewares/commonFrameWork_0.0.7.js

@@ -273,13 +273,27 @@ function showCompletion() {
     var didCompleteWith = $('#completed-with').val() || null;
     $('#complete-courseware-dialog').modal('show');
     $('#submit-challenge').click(function(e) {
+      e.preventDefault();
 
       $('#submit-challenge')
         .attr('disabled', 'true')
         .removeClass('btn-primary')
         .addClass('btn-warning disabled');
 
-      e.preventDefault();
+      var $checkmarkContainer = $('#checkmark-container');
+      $checkmarkContainer.css({ height: $checkmarkContainer.innerHeight() });
+
+      $('#challenge-checkmark')
+        .addClass('zoomOutUp')
+        // .removeClass('zoomInDown')
+        .delay(1000)
+        .queue(function(next) {
+          $(this).replaceWith(
+            '<div id="challenge-spinner" class="animated zoomInUp inner-circles-loader">submitting...</div>'
+          );
+          next();
+        });
+
       $.post(
         '/completed-bonfire/', {
           challengeInfo: {

server/views/coursewares/showBonfire.jade

@@ -135,8 +135,11 @@ block content
                     a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                 .modal-body
                     .text-center
-                        .animated.zoomInDown.delay-half
+                      #checkmark-container.row
+                          #challenge-checkmark.animated.zoomInDown.delay-half
                               span.completion-icon.ion-checkmark-circled.text-primary
+                      .spacer
+                      .row
                       if (user)
                           #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
 

server/views/coursewares/showHTML.jade

@@ -88,8 +88,11 @@ block content
                         a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                     .modal-body
                         .text-center
-                            .animated.zoomInDown.delay-half
+                            #checkmark-container.row
+                                #challenge-checkmark.animated.zoomInDown.delay-half
                                     span.completion-icon.ion-checkmark-circled.text-primary
+                            .spacer
+                            .row
                                 if(user)
                                     #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
                                 else

server/views/coursewares/showJS.jade

@@ -82,8 +82,11 @@ block content
                     a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                 .modal-body
                     .text-center
-                        .animated.zoomInDown.delay-half
+                        #checkmark-container.row
+                            #challenge-checkmark.animated.zoomInDown.delay-half
                                 span.completion-icon.ion-checkmark-circled.text-primary
+                        .spacer
+                        .row
                         if (user)
                             #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
                             if (user.progressTimestamps.length > 2)