patorn-client: add spinner css

redef/patron-client/src/frontend/containers/PaymentResponse.js

@@ -105,9 +105,7 @@ class PaymentResponse extends React.Component {
     if (this.props.isSavingPayment || this.props.isRequestingLoansAndReservations) {
       return (
         <div style={{textAlign: 'center'}}>
-          <span data-automation-id="is_searching" className="loading-spinner">
-            <i className="icon-spin4 animate-spin" style={{color: 'red', fontSize: '2em'}} />
-          </span>
+          <span data-automation-id="is_searching" className="loading-spinner"></span>
         </div>
       )
     }

redef/patron-client/src/frontend/containers/UserLoans.js

@@ -588,9 +588,7 @@ class UserLoans extends React.Component {
 
     if (this.props.isRequestingLoansAndReservations) {
       return <div style={{textAlign: 'center'}}>
-        <span data-automation-id="is_searching" className="loading-spinner">
-          <i className="icon-spin4 animate-spin" style={{color: 'red', fontSize: '2em'}} />
-        </span>
+        <span data-automation-id="is_searching" className="loading-spinner"></span>
       </div>
     } else if (this.props.loansAndReservationError) {
       return <FormattedMessage {...messages.loansAndReservationError} />

redef/patron-client/src/sass/main.scss

@@ -436,8 +436,31 @@ img.icon-tall {
   transition: opacity 500ms ease-in;
 }
 
-.loading-spinner i {
-  color: $redColor;
+.loading-spinner {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+}
+
+.loading-spinner:after {
+  content: " ";
+  display: block;
+  width: 46px;
+  height: 46px;
+  margin: 1px;
+  border-radius: 50%;
+  border: 5px solid #000;
+  border-color: #000 transparent #000 transparent;
+  animation: spinner 1.2s linear infinite;
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }