Tutorial

CSS3 Preloader Animations

Hier stelle ich ein paar Preloader CSS3 Animationen vor.
Für HTML und WordPress.
Für WordPress nutzte ich folgendes Plugin:

Animation 1

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/JjmNBPE

Animation 2

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/WNaOraj

Animation 3

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/qBJjQRR

Animation 4

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/JjmyPxd

Animation 5

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/jOeLNQp
Hinweis: Funktioniert nicht mit dem WordPress-Plugin

Animation 6

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/abRyBrb
Hinweis: Funktioniert nicht mit dem WordPress-Plugin

Animation 7

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/mdzMGez

Animation 7 Grau

Hier sieht man die Animation: https://codepen.io/Oliver7777/pen/PoyKXJv

Preload mit Script

Im Folgendem eine Lösung ohne Preloader-Plugin.
Genutzt habe ich das Plugin "Custom JS and CSS".

Dort in den Optionen einstellen, dass es im Footer integriert wird.

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; }
Select Code

jQuery

(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);
Select Code

In purem Javascript

Füge noch folgendes CSS ein:
@keyframes fadeOut { from {opacity:1;} to {opacity:0;} } .fade-out { animation-name: fadeOut; animation-duration: 0.6s; animation-fill-mode: forwards; }
Select Code

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"); } } }
Select Code