Preloader. "$.LoadingOverlay is not a function"

Question

I tried already with muliple preloaders that can be found on the internet and with each of them I get the problem that they never show up. When I check what is going on, it always say that $.LoadingOverlay is not a function" Been trying to implement this one but without any success http://www.jqueryrain.com/?eKV1bCMa

my code:

<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/loadingoverlay.js"></script>
<script src="js/loadingoverlay.min.js"></script>

</header>

This one below I've tried to put into multiple places, under closing body, after opening body or even in header

    <script>
    $( document ).ready(function() {
        $.LoadingOverlay("show");

        // Hide it after 3 seconds
        setTimeout(function () {
            $.LoadingOverlay("hide");
        }, 3000);
    });
</script>

It never worked out ;l

I need some help with it

Answer 1

I added the js minified in the js part and jquery 2.2.1 and it works like a charm, I think you should delete this <script src="js/loadingoverlay.js"></script> from the header.

https://jsfiddle.net/o90psp2o/

I use the same function

 $( document ).ready(function() {
    $.LoadingOverlay("show");

    // Hide it after 3 seconds
    setTimeout(function () {
            $.LoadingOverlay("hide");
    }, 3000);
 });