Merge pull request #13224 from Stanford-Online/giulio/capa-loading-spinner-upstream

Add font awesome loading spinner to CAPA problems

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -1523,3 +1523,10 @@ div.problem .annotation-input {
     background: url('#{$static-path}/images/partially-correct-icon.png') center center no-repeat;
   }
 }
+
+// Loading Spinner
+// ====================
+.problems-wrapper .loading-spinner {
+  text-align: center;
+  color: $gray-d1;
+}

lms/templates/problem_ajax.html

-<div id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}" data-content="${content | h}"></div>
+<%! from django.utils.translation import ugettext as _ %>
+<div id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}" data-content="${content | h}">
+    <p class="loading-spinner">
+        <span class="icon fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></span>
+        <span class="sr">${_('Loading')}</span>
+    </p>
+</div>