Issue #3170158 by keshav.k, amietpatial: Add loader when user click on New...

Issue #3170158 by keshav.k, amietpatial: Add loader when user click on New captcha link, Because it takes time to load the captcha

image_captcha/image_captcha.libraries.yml

@@ -15,3 +15,6 @@ image-captcha-refresh:
   version: 1.0
   js:
     js/image_captcha_refresh.js: {}
+  css:
+    theme:
+      image_captcha_refresh.css: {}

image_captcha/image_captcha_refresh.css

+.image_captcha_refresh_loader {
+  border: 5px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 5px solid #000;
+  width: 30px;
+  height: 30px;
+  -webkit-animation: image_captcha_refresh_spin 1s linear infinite;
+  animation: image_captcha_refresh_spin 1s linear infinite;
+	position: absolute;
+	left: 0;
+	right: 0;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+}
+
+/* Safari */
+@-webkit-keyframes image_captcha_refresh_spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes image_captcha_refresh_spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.captcha {
+  position: relative;
+}

image_captcha/js/image_captcha_refresh.js

@@ -24,6 +24,8 @@
         var date = new Date();
         var baseUrl = document.location.origin;
         var url = baseUrl + '/' + $(this).attr('href') + '?' + date.getTime();
+        // Adding loader.
+        $('.captcha').append('<div class="image_captcha_refresh_loader"></div>');
         $.get(
           url,
           {},
@@ -32,6 +34,7 @@
               $('.captcha', $form).find('img').attr('src', response.data.url);
               $('input[name=captcha_sid]', $form).val(response.data.sid);
               $('input[name=captcha_token]', $form).val(response.data.token);
+              $('.captcha .image_captcha_refresh_loader').remove();
             }
             else {
               alert(response.message);