Static busy spinner for oidc login views

src/oidc_templates/login.ejs

@@ -48,6 +48,26 @@
         display: none;
       }
 
+      #busyIndicator {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        border: 1px solid rgba(255,255,255,.3);
+        border-radius: 50%;
+        border-top-color: #fff;
+        animation: spin 1s ease-in-out infinite;
+        margin-right: 5px;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .btn {
+        display: flex;
+        align-items: center;
+      }
+
     </style>
 
 </head>
@@ -85,7 +105,7 @@
             </div>
             <div class="card-form-bottom-bar">
               <a href="/passwordreset.html">{{ login.resetPasswordAction }}</a>
-              <button class="btn btn-primary btn-outline" type="submit" id="loginSubmitButton"><i id="busyIndicator" class="hide fa fa-circle-notch fa-spin"></i> {{ login.signInAction }}</button>
+              <button class="btn btn-primary btn-outline" type="submit" id="loginSubmitButton"><div id="busyIndicator" class="hide"></div> {{ login.signInAction }}</button>
             </div>
           </form>
         </div>