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,17 +135,20 @@ block content
                     a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                 .modal-body
                     .text-center
-                        .animated.zoomInDown.delay-half
+                      #checkmark-container.row
-                            span.completion-icon.ion-checkmark-circled.text-primary
+                          #challenge-checkmark.animated.zoomInDown.delay-half
-                    if (user)
+                              span.completion-icon.ion-checkmark-circled.text-primary
-                        #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
+                      .spacer
+                      .row
+                      if (user)
+                          #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
 
-                        if (user.progressTimestamps.length > 2)
+                          if (user.progressTimestamps.length > 2)
-                            a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
+                              a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
-                                i.fa.fa-twitter  
+                                  i.fa.fa-twitter  
-                                    = phrase
+                                      = phrase
-                    else
+                      else
-                        a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
+                          a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
     #reset-modal.modal(tabindex='-1')
         .modal-dialog.animated.fadeInUp.fast-animation
             .modal-content

server/views/coursewares/showHTML.jade

@@ -88,10 +88,13 @@ block content
                         a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                     .modal-body
                         .text-center
-                            .animated.zoomInDown.delay-half
+                            #checkmark-container.row
-                                span.completion-icon.ion-checkmark-circled.text-primary
+                                #challenge-checkmark.animated.zoomInDown.delay-half
-                            if(user)
+                                    span.completion-icon.ion-checkmark-circled.text-primary
-                                #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
+                            .spacer
-                            else
+                            .row
-                                a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
+                                if(user)
+                                    #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
+                                else
+                                    a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
     include ../partials/challenge-modals

server/views/coursewares/showJS.jade

@@ -82,16 +82,19 @@ block content
                     a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                 .modal-body
                     .text-center
-                        .animated.zoomInDown.delay-half
+                        #checkmark-container.row
-                            span.completion-icon.ion-checkmark-circled.text-primary
+                            #challenge-checkmark.animated.zoomInDown.delay-half
-                    if (user)
+                                span.completion-icon.ion-checkmark-circled.text-primary
-                        #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
+                        .spacer
-                        if (user.progressTimestamps.length > 2)
+                        .row
-                            a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
+                        if (user)
-                                i.fa.fa-twitter  
+                            #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
-                                    = phrase
+                            if (user.progressTimestamps.length > 2)
-                    else
+                                a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
-                        a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
+                                    i.fa.fa-twitter  
+                                        = phrase
+                        else
+                            a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
     include ../partials/challenge-modals
     script.
         var MDNlinks = !{JSON.stringify(MDNlinks)};