Merge pull request #154 from cfpb/loading

Loading icon
cfpb · Aug 23, 2017 · c1143a8 · c1143a8
2 parents eaf5c1a + d24055c
commit c1143a8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/keycloak/themes/hmda/login/register.ftl b/keycloak/themes/hmda/login/register.ftl
@@ -133,7 +133,13 @@ function getInstitutions(domain) {
         );
       }
     },
-    data: { domain: domain }
+    data: { domain: domain },
+    beforeSend: function() {
+      $('#institutions').html(
+        '<div class="LoadingIconWrapper">' +
+        '<img src="${url.resourcesPath}/img/LoadingIcon.png" class="LoadingIcon" alt="Loading"></img>' +
+        '</div>');
+    }
   })
   .done(function(data, status, xhr) {
     buildList(data.institutions);

diff --git a/keycloak/themes/hmda/login/resources/css/hmda.css b/keycloak/themes/hmda/login/resources/css/hmda.css
@@ -204,3 +204,38 @@ fieldset fieldset legend {
   font-weight: 700;
   padding: 3px 0;
 }
+
+.LoadingIconWrapper {
+  -webkit-transform: rotateX(180deg);
+  width: 3em;
+  margin: 0 auto;
+  transform: rotateX(180deg);
+}
+
+.LoadingIcon {
+  background-image: url('/img/LoadingIcon.png');
+  width: 3em;
+  animation: loading-spin 2s infinite linear;
+}
+
+@-webkit-keyframes loading-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-359deg);
+    transform: rotate(-359deg);
+  }
+}
+
+@keyframes loading-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(-359deg);
+    transform: rotate(-359deg);
+  }
+}
diff --git a/keycloak/themes/hmda/login/resources/img/LoadingIcon.png b/keycloak/themes/hmda/login/resources/img/LoadingIcon.png