Mein Aufbau:
Template fe_page.html5 direkt unter <body>:
HTML-Code:
<div class="preloader"><div class="loaded"> </div></div>
In einer eigenen JS-Datei im JQuery-Bereich eingefügt:
Code:
$(window).load(function ()
{
$('.loaded').fadeOut();
$('.preloader').delay(1000).fadeOut('slow');
});
Und das CSS dazu:
HTML-Code:
/* ########################################################################################## */
/* Ladeanzeige */
/* ########################################################################################## */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99999;
height: 100%;
width: 100%;
overflow: hidden !important;
}
.loaded {
width: 60px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(images/loading.gif);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
background-size: cover;
margin: -20px 0 0 -20px;
}
Ist identisch mit diesem Template, das ich für Contao nachbaue.
Preloader?
Zitieren
Zitat von jo94
