By default awesome studio shows us the default loader on a form submits, but if you want you can use Ladda Js library to show the loaded instead of default loader on a form submit.

Just check the sample below on how to do it.

 

<form enctype="multipart/form-data" role="wppb-register-user" action="">
    <input class="form-control text-input" 
		   name="user_first" 
		   maxlength="70" 
		   id="user_first" 
		   placeholder="First Name*" 
		   type="text" 
		   required>
    
	<input class="form-control text-input"
		   name="user_last" maxlength="70" 
		   id="user_last" 
		   placeholder="Last Name*" 
		   type="text" 
		   required>
                 
             
               
    <button type="submit" 
			id="register" 
			class="submit  btn ladda-button js-register brand-white pad-x-6" 
			name="register" 
			value="Register"> Register </button>
            
    <!-- .form-submit -->
    <div class="errormsg"></div>		
</form>

   <script type=spa/axn axn='form.ajax' 
         bind='submit' 
         bind_selector="form[role='wppb-register-user']" 
         route_ajax='abc-xyz-register-xyz' 
         loader='ladda'
         loader_selector='.js-register'> 
      
  </script>

So, we basically needed to add these two attributes to the script tag

loader='ladda' to specify the loader library we want to use, if we remove this library, spa will default to original loader.

loader_selector='.js-register' to specify the target button which need to show the loader, in case of above example that is register button whose class is 'js-register'.