$(document).on('ready pjax:scriptcomplete',function() {
 
  if($('#register_button').length > 0) {
    $('#limesurvey').submit(function(e) {
      // Do something when the register form is submitted.
    });  
  }
});

$(document).on('ready pjax:scriptcomplete', function() {
    if($('#register_button').length > 0) {
        $('#limesurvey').submit(function(e) {
            // We can change the text to whatever: "Registering...", "Please wait...", "Stop clicking...", etc.
            // $('#register_button').prop("value", "Register "); 
 
            // I'm simply inserting a div that contains the spinner animated gif image inside the <button></button>.
            // It could also be done by adding the spinner <img></img> here and using JQuery to manipulate visibility. 
            $('#register_button').append("<div class='register_button_spinner'></div>");
        });
    }
});

.register_button_spinner {
    background-image: url(/static/img/register_button_spinner.gif); 
}

$(document).ready(function(){
            $("body").removeClass("body-loading").addClass("body-loaded");
        });
        $("button[type='submit']").on("click",function(){
            if (!$(this).closest('form')[0].checkValidity || $(this).closest('form')[0].checkValidity()) {
                $("body").removeClass("body-loaded").addClass("body-loading");
            }
        });
        $("a[data-limesurvey-submit],a[data-limesurvey-lang]").on("click",function(){
            $("body").removeClass("body-loaded").addClass("body-loading");
        });

/* loading loaded */
.js .body-loading #dynamicReloadContainer {
    opacity: 0;
}
.js .body-loading #dynamicReloadContainer {
    -webkit-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
}
#ajax-loading .loader {
    display: none;
    z-index: 9999999;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 0;
}
#ajax-loading .fa{width:1rem;height:1rem;font-size:1rem;margin-top:-0.5rem;margin-left:-0.5rem;}
#ajax-loading .fa-lg{width:1.4rem;height:1.4rem;font-size:1.4rem;margin-top:-0.7rem;margin-left:-0.7rem;}
#ajax-loading .fa-2x{width:2rem;height:2rem;font-size:2rem;margin-top:-1rem;margin-left:-1rem;}
#ajax-loading .fa-3x{width:3rem;height:3rem;font-size:3rem;margin-top:-1.5rem;margin-left:-1.5rem;}
#ajax-loading .fa-2x{width:4rem;height:4rem;font-size:4rem;margin-top:-2rem;margin-left:-2rem;}
#ajax-loading .fa-2x{width:5rem;height:5rem;font-size:5rem;margin-top:-2.5rem;margin-left:-2.5rem;}

.js .body-loading #ajax-loading .loader {
    display: block;
}

<div id="ajax-loading" aria-hidden=1><i class="loader fa fa-circle-o-notch fa-spin fa-3x fa-fw text-muted"></i></div>
<script>
if (!window.jQuery) {
    window.onload = function() {
        body = document.getElementsByTagName('body')[0];
        body.className = body.className.replace(/\body-loading\b/,'body-loaded');
    };
}
</script>