Index: lams_central/web/css/_learner_base.scss
===================================================================
diff -u -r964c0c4acd889de82f339a982844d32edd6fd784 -r8727ef2d06f488a13a0729f5304d091e3ecc036c
--- lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision 964c0c4acd889de82f339a982844d32edd6fd784)
+++ lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision 8727ef2d06f488a13a0729f5304d091e3ecc036c)
@@ -1121,4 +1121,43 @@
 // Use the same offset as the radio buttons in Bootstrap so that ticks line up with radio buttons on pages like Optional Activities
 .radio-button-offset {
 	margin-left: -20px;
-}
\ No newline at end of file
+}
+
+// Reformat the spinner used by Mottie tablesorter to use fa-refresh. The spinner appears on every column and if you only want one column
+// make the other columns <th class="no-spinner"
+.tablesorter-bootstrap .tablesorter-processing {
+	background-image: none !important;
+    content: none !important;
+}
+
+.tablesorter-bootstrap .tablesorter-processing .tablesorter-header-inner:before {
+  content: "\f021"; // fa-refresh
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  -webkit-animation: fa-spin 2s infinite linear;  // fa-spin
+  animation: fa-spin 2s infinite linear;  // fa-spin
+  text-decoration: inherit;
+  margin-right: 3px;
+  color: inherit;
+  float: left;
+  position: relative;
+  overflow: hidden;
+  left: calc(50% + 14px);
+  /* 14px = 1/2 of 18px padding for sort arrows + 1/2 of 10px width of this block */
+  display: inline-block;
+}
+
+.tablesorter-bootstrap .tablesorter-processing .tablesorter-header-inner {
+    margin-left: -15px; // the spinner moves the title slightly
+}
+    
+.tablesorter-bootstrap .tablesorter-processing.no-spinner .tablesorter-header-inner:before {
+	background-image: none !important;
+    content: none !important;
+}
+
+.tablesorter-bootstrap .tablesorter-processing.no-spinner  .tablesorter-header-inner {
+    margin-left: 0px; 
+}
+