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

CSS 3 Loader Animation HTML und Wordpress

Oliver77

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;
}
#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:

Oliver77

Mitglied
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)
 

Oliver77

Mitglied
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;}
}
 

msi

Mitglied
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.
 

Sclero2004

Mitglied
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.
 
Oben