• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS 3 Loader Animation HTML und Wordpress

Oliver77

Oliver77

Aktives Mitglied
Hallo, habe für meine Homepage und dem Wordpress-Plugin Page Loading Effects (Preloader) eine kleine Loading-Animation erstellt.
Vielleicht kann der eine oder andere das auch gebrauchen.
ani1.jpg
Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/JjmNBPE

Für das Plugin stellt man auf Custom um und fügt das HTML und das CSS ein:

HTML: 
<div id="preload-screen">       
<div id="spin-container">
<div id="c-dot1"></div>
<div id="c-dot2"></div>
<div id="c-dot3"></div>
<div id="c-dot4"></div>
</div>
</div>
CSS: 
#preload-screen {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background:#fff;
z-index:1000; 
}
#spin-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
width:80px;
height:80px;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
}
@keyframes spin {
from {rotate: 0deg;}
to {rotate: 360deg;}
}
@keyframes scale {
from {transform:scale(1);}
to {transform:scale(1.2);}
}
#spin-container>div {   
border-radius:40px;
animation-name: scale;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
#c-dot1 {
background: #eb881e;
}
#c-dot2 {
background: #1cd3d1;
}
#c-dot3 {
background: #1e62eb;
}
#c-dot4 {
background: #c5de1f;
}
 
Zuletzt bearbeitet:
Klar sollte man das optimieren, aber da wo Bilder geladen werden, entsteht eine Wartezeit.
Ich programmiere gerade eine Galerie, da habe ich es eingefügt.
Das hässliche Flackern fällt weg...

Galerie

(die Galerie ist noch nicht für mobil optimiert)
 
So habe ich es eingebaut:
Javascript: 
const preloadImg = ["bild1", "bild2", "bild3"]
            const pathPl = "galerie-imgs";
            var  imagesLoaded = 0;

            for (var i = 0; i < preloadImg.length; i++) {
                var img = new Image();
                img.src = pathPl + "/" + preloadImg[i] + ".jpg";
                img.onload = function () {
                    imagesLoaded++;
                    if (imagesLoaded == preloadImg.length) {
                        document.getElementById("preload-screen").classList.add("fade");
                        setTimeout(function(){ 
                        document.getElementById("preload-screen").remove();
                        }, 500);
                    }
                }
            }

CSS: 
.fade {
    animation-name: fadeOutPreloader;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeOutPreloader {
    from {opacity: 1;}
    to {opacity: 0;}
}
 
Ich weiß ja nicht was für eine Internetleitung du hast, aber bei mir sieht mit nur für einen Bruchteil einer Sekunde die Loading-Animation (wobei die Animation überhaupt nicht zum tragen kommt) und dann sofort die Galerie.
 
Manchmal kommt es auch vor, dass man eine Datenbankabfrage hat, die, auch nach Optimierung, mehrere Sekunden braucht um fertig zu werden. Da hilft dann auch ein Glasfaseranschluss nicht. In solch einem Fall sind Entwickler mehr als einmal mit der Frage an mich herangetreten, wie man solch eine Loading-Animation macht.
 
Hallo ich habe auch eine Version ohne Wordpress-Plugin erstellt. Genutzt habe ich dafür das Wordpress-Plugin "Custom JS and CSS".
Das JS in den Footer implementiert. (Siehe Optionen vom Plugin)
Das CSS, man kann es je nach belieben austauschen mit den oben gezeigten Beispielen, man füge noch
CSS: 
body {
visibility:hidden;
}
ein, um ein Flackern zu verhindern.

CSS: 
body {
visibility:hidden;
}
#preload-screen {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
z-index:100000;
background:#fff;
}
#spin-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
width:80px;
height:80px;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
}
@keyframes spin {
from {rotate: 0deg;}
to {rotate: 360deg;}
}

@keyframes scale {
from {transform:scale(1);}
to {transform:scale(1.2);}
}
#spin-container>div {
border-radius:40px;
animation-name: scale;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
#c-dot1 {
background: #eb881e;
}
#c-dot2 {
background: #1cd3d1;
}
#c-dot3 {
background: #1e62eb;
}
#c-dot4 {
background: #c5de1f;
}

Das jQuery sieht wie folgt aus (empfohlen für WordPress):
Javascript: 
(function ($) {
     $("body").css("visibility","visible");
    $("body").append('<div id="preload-screen"><div id="spin-container"><div id="c-dot1"></div><div id="c-dot2"></div><div id="c-dot3"></div><div id="c-dot4"></div></div></div>');
// hier kann man es anpassen, wenn man einen anderen Preloader nutzen will
// (siehe Beispiele von CodePen)

    const allSrc = [];
    var checkSuffix;
    $("*").each(function () {
        if ($(this).attr("src") != null) {
            const regexSuffix = /\..{3,}$/g;
            checkSuffix = regexSuffix.test($(this).attr("src"));
        }
        if ($(this).attr("src") != null && $(this).is('img') && checkSuffix && !~allSrc.indexOf($(this).attr("src"))) {
            allSrc.push($(this).attr("src"));
        }
        const regexUrl = /url\(("|').+\..{3,}("|')\)/g;
        const pureUrlExp = new RegExp(/(?<="|').+(?="|')/, "g");

        const checkUrl = regexUrl.test($(this).css("background"))
        if (checkUrl) {
            let url = $(this).css("background");
            let pureUrl = pureUrlExp.exec(url);
            if (!~allSrc.indexOf(pureUrl[0])) {
                allSrc.push(pureUrl[0]);
            }
        }
    });

    var imagesLoaded = 0;
    for (var i = 0; i < allSrc.length; i++) {
        var img = new Image();
        img.src = allSrc[i];
       
         $(img).on("load", function() {
           imagesLoaded++;
            if (imagesLoaded == allSrc.length) {
                $("#preload-screen").fadeOut(600, function () {
                    $("#preload-screen").remove();
                });
            }
        });
    }
})(jQuery);
In purem Javascript:
füge noch folgendes CSS ein:
CSS: 
@keyframes fadeOut {
from {opacity:1;}
to {opacity:0;}
}

.fade-out {
animation-name: fadeOut;
animation-duration: 0.6s;
animation-fill-mode: forwards;
}

Javascript:
Javascript: 
document.querySelector("body").style.visibility = "visible";
const preloadDiv = document.createElement("div");
preloadDiv.id = "preload-screen";
document.querySelector("body").appendChild(preloadDiv);
document.querySelector("#preload-screen").innerHTML = '<div id="spin-container"><div id="c-dot1"></div><div id="c-dot2"></div><div id="c-dot3"></div><div id="c-dot4"></div></div>';

const allSrc = [];
var checkSuffix;

for (let el of document.querySelectorAll("*")) {
    if (el.getAttribute("src") != null) {
        const regexSuffix = /\..{3,}$/g;
        checkSuffix = regexSuffix.test(el.getAttribute("src"));
    }

    if (el.getAttribute("src") != null && el.tagName == "IMG" && checkSuffix && !~allSrc.indexOf(el.getAttribute("src"))) {
        allSrc.push(el.getAttribute("src"));
    }

    const  regexUrl = /url\(("|').+\..{3,}("|')\)/g;
    const pureUrlExp =  new RegExp(/(?<="|').+(?="|')/, "g");

    const allCss = window.getComputedStyle(el, null);
    let backgroundCSS = allCss.getPropertyValue("background");
    if (el.style.background != "") {
        backgroundCSS = el.style.background;
    }

    const checkUrl = regexUrl.test(backgroundCSS);
    if (checkUrl) {
        let pureUrl = pureUrlExp.exec(backgroundCSS);
        if (!~allSrc.indexOf(pureUrl[0])) {
            allSrc.push(pureUrl[0]);
        }
    }
}

var imagesLoaded = 0;
for (var i = 0; i < allSrc.length; i++) {
    var img = new Image();
    img.src = allSrc[i];
    img.onload = function () {
        imagesLoaded++;
        if (imagesLoaded == allSrc.length) {
            document.querySelector("#preload-screen").classList.add("fade-out");
            setTimeout(() => {
                document.querySelector("#preload-screen").remove();
            }, "600");
        }
    }
}
Und fertig ist der Preloader!

Hier nochmal ausführlich auf meiner Website:
Tutorial
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben