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 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
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 {
display:none;
}
#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("display", "block");
$("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.onload = function () {
imagesLoaded++;
if (imagesLoaded == allSrc.length) {
$("#preload-screen").fadeOut(600);
setTimeout(() => {
$("#preload-screen").remove();
}, "600");
}
}
}
})(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.display = "block";
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