Update css spinners

src/components/Blog.js

@@ -7,7 +7,7 @@ import contentStyle from '../static/stylesheets/content.scss';
 export default class Blog extends Component {
 
   render() {
-    if (this.props.isLoading || true) {
+    if (this.props.isLoading) {
       return (
         <div className={contentStyle.contentWrapper}>
           <Spinner/>

src/components/Spinner.js

@@ -5,11 +5,13 @@ import styles from './Spinner.scss';
 export default class Spinner extends Component {
   render() {
     return (
-      <div class={styles.ldsEllipsis}>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+      <div className={styles.spinnerWrapper}>
+        <div className={styles.ldsEllipsis}>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
       </div>
     )
   }

src/components/Spinner.scss

@@ -1,12 +1,20 @@
 /*
   from https://loading.io/css/
 */
+@import "../static/stylesheets/variables.scss";
+
+.spinnerWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 
 .ldsEllipsis {
   display: inline-block;
   position: relative;
   width: 64px;
   height: 64px;
+  margin: 0 auto;
 }
 .ldsEllipsis div {
   position: absolute;
@@ -14,7 +22,7 @@
   width: 11px;
   height: 11px;
   border-radius: 50%;
-  background: #fff;
+  background: $black;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .ldsEllipsis div:nth-child(1) {

src/static/stylesheets/content.scss

@@ -13,5 +13,4 @@
 
 .content {
   box-sizing: border-box;
-  margin: 0 auto;
 }