Added CSS3 animation on Remote Validation

Author: ghiscoding

style.css

@@ -28,4 +28,19 @@ textarea.ng-valid.ng-dirty {
 /* error display font italic, text-danger is red in BS */
 .validation.text-danger {
     font-style: italic;
+}
+
+.glyphicon.spinning {
+    animation: spin 1s infinite linear;
+    -webkit-animation: spin2 1s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spin2 {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
 }

templates/testingFormDirective.html

@@ -20,6 +20,9 @@ <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
         <div class="form-group">
             <label for="input1">{{ 'INPUT1' | translate }}</label>
             <input type="text" class="form-control" name="input1" placeholder="alpha|min_len:2|remote:customRemoteValidationCall|required" validation="alpha|min_len:2|remote:customRemoteValidationCall|required" ng-model="input1" />
+            <div ng-if="form1.input1.$processing">
+              <span class="glyphicon glyphicon-cog spinning"></span>
+            </div>
         </div>
         <div class="form-group">
             <label for="input2">{{ 'INPUT2' | translate }}</label>

templates/testingFormService.html

@@ -25,6 +25,9 @@ <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
         <div class="form-group">
             <label for="input1">{{ 'INPUT1' | translate }}</label>
             <input type="text" class="form-control" name="input1" placeholder="alpha|min_len:2|remote:customRemoteValidationCall|required" ng-model="input1" />
+            <div ng-if="form1.input1.$processing">
+              <span class="glyphicon glyphicon-cog spinning"></span>
+            </div>
         </div>
         <div class="form-group">
             <label for="input2">{{ 'INPUT2' | translate }}</label>