In html Block vor Submit Button einfügen.
HTML
<div id="submit-spinner" style="display:none;">
<div class="spinner-animation"></div>
<p>Dateien werden hochgeladen. Bitte warten ...</p>
</div>
<style>
#submit-spinner {
text-align: center;
margin: 20px 0;
}
.spinner-animation {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
jQuery(document).ready(function($) {
setTimeout(function() {
// Feuert bei Submit button Klick
$('.wsf-form button[type="submit"]').on('click', function() {
$('#submit-spinner').show();
});
// Blende Spinner Wrapper bei Validierungsfehlern aus
$(document).on('wsf-submit-validate-fail', function() {
$('#submit-spinner').hide();
});
// Ajax complete Funktion
$(document).ajaxComplete(function() {
$('#submit-spinner').hide();
});
}, 500);
});
</script>