CSS 3 Loader Animation HTML und Wordpress

[Oliver77]

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.

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:

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

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

 

[Oliver77]

Hier noch eine zweite Animation:

https://codepen.io/Oliver7777/pen/WNaOraj

 

[Oliver77]

Und die dritte Animation:

https://codepen.io/Oliver7777/pen/qBJjQRR

 

[Oliver77]

Die vierte Animation:

https://codepen.io/Oliver7777/pen/JjmyPxd

 

[Oliver77]

Und noch eine:

https://codepen.io/Oliver7777/pen/jOeLNQp
Hinweis: Funktioniert nicht mit dem Wordpress-Plugin

 

[Oliver77]

Der klassische Kringel schlechthin:



https://codepen.io/Oliver7777/pen/abRyBrb
Hinweis: Funktioniert nicht mit dem Wordpress-Plugin

 

[Oliver77]

Auch ein Klassiker:



https://codepen.io/Oliver7777/pen/mdzMGez

Auch in Grau:

https://codepen.io/Oliver7777/pen/PoyKXJv

 

[msi]

eine kleine Loading-Animation

Wofür braucht man das? Wenn die Seite lange zum Laden braucht, sollte man das dann nicht besser optimieren anstatt noch zusätzlich solche Sachen einzubauen?

 

[Oliver77]

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]

So habe ich es eingebaut:

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

.fade {
    animation-name: fadeOutPreloader;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeOutPreloader {
    from {opacity: 1;}
    to {opacity: 0;}
}

 

[msi]

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.

 

[Oliver77]

Also bei mir dauert es 3 bis 4 Sekunden, und man sieht die Ani...

 

[msi]

Also bei mir dauert es 3 bis 4 Sekunden

Langsame Leitung
Mit einer 300MBit Glasfaserleitung dauert das ein paar Millisekunden.

 

[Sclero2004]

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.