Merge pull request #25 from cfpb/css-loading-icon

Bring css loading icon to modified lar

src/common/LoadingIcon.jsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
-const LoadingIcon = () => {
+const LoadingIcon = props => {
+  let className = 'LoadingIconWrapper'
+  if (props.className) className += ' ' + props.className
   return (
-    <div className="LoadingIconWrapper">
-      <img
-        src="/data-publication/img/LoadingIcon.png"
-        className="LoadingIcon"
-        alt="Loading"
-      />
+    <div className={className}>
+      <div className="LoadingIcon" />
     </div>
   )
 }

src/common/LoadingIcon.scss

@@ -1,21 +1,52 @@
-.LoadingIconWrapper {
+.LoadingInline.LoadingIconWrapper {
+  height: 22px;
+  width: 22px;
   display: inline-block;
-  position: relative;
-  transform: rotateX(180deg);
-  width: 40px;
+  margin-left: 5px;
+  margin-top: 0;
+  padding-top: 3px;
+  .LoadingIcon {
+    height: 22px;
+    width: 22px;
+  }
 }
 
-.LoadingIcon {
-  animation: loading-spin 2s infinite linear;
-  position: absolute;
-  top: -7px;
+.status .LoadingInline {
+  height: 18px;
+  width: 18px;
 }
 
+
 @keyframes loading-spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
-    transform: rotate(-359deg);
+    transform: rotate(360deg);
   }
 }
+
+.LoadingIconWrapper {
+  position: relative;
+  height: 30px;
+  width: 30px;
+  display: inline-block;
+  margin-top: 2em;
+  margin-left: 48%;
+}
+
+.LoadingIcon {
+  position:absolute;
+  margin: 0 auto;
+  border: 4px solid $color-gray-lightest;
+  border-left-color: $color-primary;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: loading-spin 1.2s linear infinite;
+}
+
+.usa-alert .LoadingIcon {
+  border: 4px solid $color-gray-lighter;
+  border-left-color: $color-primary;
+}

src/index.html

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="/data-publication/img/favicons/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="/data-publication/css/app.min.css">
-  <link rel="prefetch" href="/data-publication/img/LoadingIcon.png">
   <!-- Google Tag Manager -->
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

src/reports/modified-lar/index.jsx

@@ -112,7 +112,7 @@ class ModifiedLar extends React.Component {
 
     let loading = null
     if (this.state.status.id === 1 || this.state.status.id === 3) {
-      loading = <LoadingIcon />
+      loading = <LoadingIcon className="LoadingInline" />
     }
 
     return (