Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Ein Page Loading Effects ist eine Animation oder ein visueller Effekt, der auf einer Website angezeigt wird, während der Inhalt geladen wird. Übergangsanimationen können dazu beitragen, dass die Website flüssig und professionell wirkt. Obwohl ein zu langsamer Seitenaufbau ein Hinweis darauf sein kann, dass etwas falsch läuft, kann ein gut gestalteter Page Loading Effect dazu beitragen, die Wartezeit für den Benutzer zu verkürzen und ein besseres Erlebnis zu bieten. Darüber hinaus können Übergangsanimationen zwischen den Seiten eine wichtige Rolle spielen, um ein nahtloses Benutzererlebnis zu gewährleisten, falls es dem Design entspricht.
Auch der Webmaster kann von “Page Loading Effects” profitieren, da sie während der Aktivität sehr entspannend wirken können.
Ein schöner Page Loading Effect kann auch helfen, wenn die Website beim ersten Aufruf etwas träge ist. Es ist somit auch eine Möglichkeit, den Benutzern Feedback zu geben, dass die Website noch aktiv ist und dass der Inhalt noch geladen wird.
Page Loading Effects sind keine Hexerei
Meist werden diese Plug-ins als Preloader bezeichnet, obwohl es sich dabei nicht um einen Preloader handelt. Der Page Loading Effect wird lediglich als Vorschaltung aktiviert und deaktiviert, sobald die Seite vollständig geladen ist.
Beispiel
/* Page Loading Effect */
add_action('wp_footer', function () {
?>
<div class="pageLoader"> <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div> </div>
<style>
.pageLoader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
color: #2b2b2b;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.pageLoaderText {
font-size: 2rem;
font-weight: 800;
}
</style>
<script type="text/javascript">
(function($) {
let interval = setInterval(function() {
let dots = $('.pageLoaderDots');
if (dots.text().length !== 3) {
dots.append('.');
} else {
dots.text('');
}
}, 0);
$(function() {
clearInterval(interval);
$('.pageLoaderDots').text('');
$('.pageLoader').fadeOut();
});
})(jQuery);
</script>
<?php
});
Anstelle von Text kann auch ein Spinner an der Stelle eingefügt werden, wo es heißt <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div>
.
Wer so GIF als Spinn usw., siehe PRELOADERS
<img class="aligncenter wp-image-205071 size-full" src="https://..Spinner-5.gif" alt="Spinner-5" width="64" height="64" />
WP-Plug-ins
Die Auswahl von Page Loading Effects

Es kann schwierig sein, ein Plug-in zu finden, das nur für den Erstaufruf der Website aktiviert wird. Dies kann jedoch mit Cookies erreicht werden.
Es ist auch möglich, die Plugin-Einstellungen so anzupassen, dass sie nur auf der Startseite der Website angewendet werden. Dies ist bei den meisten Plug-ins möglich. Alternativ können die Loading Effects auf jeder Seite beim Erstaufruf aktiviert werden.
Es gibt viele verschiedene Plug-ins zur Auswahl, und die Beliebtheit eines Plug-ins hängt nicht unbedingt von der Anzahl der aktiven Installationen ab. Ein Plug-in mit 70.000 Benutzern kann fast genauso gut sein wie eines mit nur 400 aktiven Installationen. 🐻
Wichtige Details auf einen Blick: Die Tabelle im Überblick
- Die Reihenfolge der Plug-ins folgt in etwa ihrer Dateigröße.
- Die Anzahl der aktiven Installationen gibt einen Hinweis auf die Beliebtheit des jeweiligen Plug-ins.
- Es gibt auch Plug-ins, die nur beim Erstaufruf der Website Page Loading Effects anzeigen können.
- Informationen zu den Farbeinstellungen der Loading Effects sind ebenfalls enthalten.
- Einige Plug-ins sind sich in ihren Funktionen sehr ähnlich.
1. Datei-größe | 2. Instal-lationen | 3. First visit | 4. Back-ground | 5. Sind ähnlich | |
Preloader | 68 KB | 20.000+ | Ja | Ja | 🟠 |
Page Loading Effects | 70 KB | 4.000+ | Ja | Ja | 🟣 |
Easy Lite Preloader | 90 KB | 600+ | Ja | 🟠 | |
WP Smart Preloader | 395 KB | 10.000+ | m. extra CSS | 🟣 | |
Preloader Plus | 425 KB | 30.000+ | Ja | Ja | 🔵 |
Loftloader | 459 KB | 40.000+ | Ja / Pro | Ja | 🔵 |
Einige Plug-ins weisen ähnliche Funktionen auf, wie beispielsweise Preloader und Easy Lite Preloader. Bei diesen beiden Plug-ins ist es schwer, eine Entscheidung zu treffen, da es auf die persönlichen Vorlieben ankommt.
Page Loading Effects und WP Smart Preloader sind ebenfalls ähnlich.
Preloader Plus und Loftloader sind weitere ähnliche Plug-ins. Die Pro-Version von Loftloader bietet noch mehr Funktionen.
Preloader
Preloader, Dateigröße 68 KB. 20.000+ aktive Installationen.
Funktioniert mit jQuery und CSS3.
- Keine Vorlagen außer dem Standard GIF. Anderes Bild bzw. GIFs sind selbst zu erstellen.
- Benutzerdefinierte Hintergrundfarbe.
- Anzeigendauer und so sind nicht definierbar.
- Ohne der Option nur zum Erstaufruf den Loading Effects zeigen, aber Displays des mehreren u. a. nur in WooCommerce zeigen.
- Zur Funktion ist der Theme
header.php
nach<body>
das HTML-Element:<div id="wptime-plugin-preloader"></div>
einzutragen.
Das ist also ein Plug-in für selbst erstelltes Icon oder GIF bspw. der eignen Website das Emblem zu zeigen. – oder so PRELOADERS
Page Loading Effects
Page Loading Effects, Dateigröße 70 KB. 3.000+ aktive Installationen. – super Sache.
… da so weitere Demo. Ein leichtes WP-Plugin, das das Laden animierter Grafiken anzeigt, bis die Seite vollständig geladen ist.
- 4 Vorlagen, dazu auch ‘Benutzerdefinierte Einstellungen’.

- Das mit den Cookies für die Option “nur Erstaufruf den Loading Effect zeigen” ist hervorragend gelöst!
- Die maximale Dauer des Seitenladevorgangs ist sehr nützlich, falls der Browser die Seite weiterhin lädt, obwohl sie bereits angezeigt wird. Andernfalls würde der Effekt nach bestmöglicher Zeit ausgeblendet.
- Dies ermöglicht es dem Webmaster, die “Page Loading Effects” bei Wartungsarbeiten zu deaktivieren, wenn der Effekt als störend empfunden wird. In diesem Fall wird es jedoch auch für den Besucher deaktiviert.
- Color Settings für Back-ground und Animated.
Easy Lite Preloader
Easy Lite Preloader, Dateigröße 90 KB. 500+ aktive Installationen.
- Ein Plug-in, das sich von den anderen unterscheidet, ist jenes, bei dem der Übergang nicht weich, sondern eher bissig ist.
- Die Option den Page Loading Effects nur im Erstaufruf zeigen ist nicht.
- Die Option, Page Loading Effects nur beim ersten Aufruf der Seite zu zeigen, ist nicht hier nicht verfügbar.
WP Smart Preloader
WP Smart Preloader, Dateigröße 395 KB. 9.000+ aktive Installationen. – Hier dem TEST schien es die Seitenladezeit bis zu 2 sek. zu verzögern.
Es gibt verschiedene Arten von animierten Ladeindikatoren, die mit CSS und minimalem HTML-Markup erstellt wurden. Dazu gehören unter anderem CSS-Spinner und -Throbber. Es gibt insgesamt sechs verschiedene Vorlagen, die verwendet werden können.
- Beachte jedoch, dass der Hintergrund nicht immer farblich anpassbar ist und in diesem Fall CSS-Kenntnisse erforderlich sind. Ein Beispiel für eine solche Vorlage ist Vorlage 1:
.smart-page-loader {
background-color: #242525;
}
.smart-loader-one {
width: 50px;
height: 50px;
border-top: 1px solid rgba(201, 195, 185, 0.08);
border-right: 1px solid rgba(201, 195, 185, 0.08);
border-bottom: 1px solid rgba(201, 195, 185, 0.08);
border-left: 1px solid rgba(201, 195, 185, 0.5);
}
- Das mit nur für Erstaufruf zeigen ist nicht.
- Die Einstellungen sind ‘Anzeigedauer Loader’ und ‘Loader zum Ausblenden’. Bspw.
WP Smart Preloader Einstellungen ‘Anzeigedauer Loader’ und ‘Loader zum Ausblenden’
Preloader Plus
Preloader Plus, Dateigröße 425 KB. 40.000+ aktive Installationen.

Das ist großartig! Was ein Entwickler mit einer Programmiergröße von rund 425 KB erreicht hat, ist beeindruckend. Im Vergleich zur Sparsamkeit des Plug-ins Page Loading Effects ist das Plug-in Preloader Plus hier herausragend. Die Anpassung erfolgt über den Customizer, sodass man genau sieht, wie das Ergebnis aussehen wird.
Beim Einstellen der Optionen unter “Settings” sollten die Häkchen bei “Show the preloader only on the front page” und “Show the preloader only on first visit” nicht gesetzt werden, da dies das WYSIWYG-Prinzip beeinträchtigt.
Das Plug-in ermöglicht eine individuelle Anpassung, z. B. das Hinzufügen von Eigenwerbung im Ladebildschirm durch Text (Settings, CUSTOM CONTENT) oder ein Bild (CUSTOM IMAGE). Es bietet auch 6 animierte Icons zur Auswahl und vieles mehr – einfach großartig, schön und leistungsstark!
Anmerkung
Zum ‘Show the preloader only on first visit’
Das stimmt. Die Einstellung “Show the preloader only on first visit” zeigt den Page Loading Effect nur beim ersten Besuch einer Seite an. Wenn die Seite bereits besucht wurde und der Browser die Seite gecached hat, wird der Page Loading Effect nicht mehr angezeigt. Das liegt daran, dass der Browser die Seite nicht erneut laden muss und der Page Loading Effect somit nicht erneut ausgeführt wird.
Loftloader
Das Plug-in Loftloader, ist mit seinen 447 KB und über 70.000 aktiven Installationen ein beliebtes Tool zur Erstellung von Page Loading Effects. Es bietet eine Vielzahl von Einstellungsmöglichkeiten und Animationsoptionen, darunter auch die Möglichkeit, eigene SVG-Icons zu verwenden.
Die Pro-Version bietet unter anderem die Möglichkeit, dass Benutzer auswählen können, welche Elemente während des Ladevorgangs erkannt werden sollen (Alle Elemente / Bilder / Videos / Bilder & Videos). Das kann die Animation verkürzen, so man Elemente, die “below the fold”, also unterhalb des Sichtbereichs sind, vorerst ausschließt.
Insgesamt ist Loftloader eine leistungsstarke Option für die Erstellung von Page Loading Effects, sowohl für Beginner als auch für erfahrene Entwickler.
- Die Option, den Preloader nur einmal pro Besucher-Sitzung anzuzeigen, ist nur in der Pro-Version verfügbar.
Selbst ohne PRO-Funktionen ist dieses Plug-in großzügig in seinen Features. Im Namen der WP-Gemeinde: herzlichen Dank!

Die Konfiguration von Loftloader erfolgt über Customizer, was eine WYSIWYG-Bearbeitung ermöglicht. Es sollte beachtet werden, dass beim Aufruf der Einstellungen der Customizer aufgerufen wird, jedoch nicht derjenige Customizer wie gewohnt sondern ein separater Customizer verwendet wird.

Weiter im Customizer sehe Beispiel: Da sind so Ending Animationen von Slide Left & Right usw.
Und viel Erfolg zu wünschen
Preloader Matrix, 1,4 MB. 1000+ aktive Installationen.
Das ist soweit sehr gut das Plug-in.
Stylish Preloader, 3 MB. 20+ aktive Installationen.
Scheint noch im Aufbau zu sein… In Aktivierung folgt so Meldung: “Das Plugin erzeugte 34 Zeichen mit unerwarteter Ausgabe während der Aktivierung” … das kann aber noch was werden.
Flat Preloader, 3,4 MB. 4.000+ aktive Installationen. Das Plug-in mit an mehr Auswahl der Animationen. …das mit Page Loading Effects nur für Erstaufruf geht nicht.
Preloader Avesome, 10,6 MB. 2.000+ aktive Installationen.
Aber hallo mal wieder!
Danke sehr
Aktualisiert im Jahr 2023-März