Simple loading overlay with Materialize

        <script>
        Materialize.loading = function (on_or_off) {
            if (typeof on_or_off == 'undefined') {
                on_or_off = true;
            }
            if (on_or_off == false) {
                $('.mt-loading-overlay').remove();
                $('.mt-loading-overlay-spin').remove();
                return;
            }
            if ($('.mt-loading-overlay-spin').length > 0) {
                return;
            }
            $('body').append('<div class="mt-loading-overlay black" style="z-index:9999;opacity:0.4;position:fixed;top:0;left:0;width:100%;height:100%;"></div><div class="mt-loading-overlay-spin" style="z-index:10000;position:fixed;top:50%;left:50%;height:100px;width:200px;margin-top:-50px;margin-left:-100px;line-height:100px;text-align:center"><div class="preloader-wrapper active"><div class="spinner-layer spinner-red-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div></div>');
        };

        Materialize.loading();  // on

        setTimeout(function(){
            Materialize.loading(false);  // off
        },2000);

        setTimeout(function(){
            Materialize.loading(true);  // on
        },4000);

        setTimeout(function(){
            Materialize.loading(false);  // off
        },6000);
        </script>