Loading spinner and helper classes

src/scss/_core.scss

@@ -50,15 +50,6 @@ a {
     background-position: left 1.05em;
 }
 
-.loading {
-    padding-top: 2em;
-    text-align: center;
-}
-
-.small {
-    font-size: .8em;
-}
-
 table {
     border-collapse: collapse;
     margin-bottom: 1em;
@@ -68,6 +59,44 @@ button {
     transition: background .3s;
 }
 
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner {
+    animation: spin 1s infinite;
+    border: 3px solid $color-heading-bg;
+    border-radius: 50%;
+    border-right-color: $color-text;
+    display: inline-block;
+    height: 20px;
+    margin-bottom: -.3em;
+    width: 20px;
+}
+
+.color-primary {
+    color: $color-primary;
+}
+
+.color-secondary {
+    color: $color-secondary;
+}
+
+.loading {
+    padding-top: 2em;
+    text-align: center;
+}
+
+.small {
+    font-size: .8em;
+}
+
 .row {
     @include row();
 
@@ -78,6 +107,10 @@ button {
     float: right;
 }
 
+.center {
+    text-align: center;
+}
+
 .inline {
     margin-right: 1em;