Ein Ladebildschirm-Plugin in WordPress implementieren

Ich wollte einen Effekt implementieren, der sich wie ein Ladeindikator dreht, damit Sie sehen können, dass es lädt, wenn WordPress lädt. Die Implementierung mit einem Plugin scheint einfach zu sein.

Page Loading Effects

Sie können es einfach mit einem Plugin namens Page Loading Effects implementieren. Ich dachte daran, Preloader zu verwenden, weil es beliebter ist, aber es funktionierte nicht.

Andere Methoden

Ich wollte eigentlich so etwas einrichten, aber ich gab auf, weil ich es nicht konnte.

<!-- Loading spinner -->

<script type="text/javascript">
$("#showspin").on("click", function(){
$("somediv .spinner").show();
});
</script>

<style media="screen">
.spinner {
background: url('/wp-admin/images/wpspin_light.gif') no-repeat;
background-size: 16px 16px;
display: none;
float: right;
opacity: .7;
filter: alpha(opacity=70);
width: 16px;
height: 16px;
margin: 5px 5px 0;
}
</style>

<div class="spinner"></div>

oder

<!-- Loading spinner -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">

//paste this code under the head tag or in a separate js file.
    // Wait for window load
    $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
    });
</script>

<style media="screen">
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
</style>

<div class="se-pre-con"></div>

Ich dachte, es könnte so implementiert werden, aber es funktionierte nicht.