Page Loader - Beispiele: Unterschied zwischen den Versionen
Aus Wikizone
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets | https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets | ||
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets | https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets | ||
| − | == Beispiel 1 == | + | |
| + | == Beispiel 1 mit no-js Check == | ||
| + | Der Loader berücksichtigt das no-js Tag im <html> und wird nicht angezeigt wenn kein JavaScript vorhanden ist. | ||
| + | 1. Add a div just after <body> tag. | ||
| + | |||
| + | '''Direkt nach <body>''' | ||
| + | <syntaxhighlight lang="html5"> | ||
| + | <div class="loader-icon"></div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | 2. CSS | ||
| + | <syntaxhighlight lang="css"> | ||
| + | .no-js #loader { display: none; } | ||
| + | .js #loader { display: block; position: absolute; left: 100px; top: 0; } | ||
| + | .loader-icon { | ||
| + | position: fixed; | ||
| + | left: 0px; | ||
| + | top: 0px; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | z-index: 9999; | ||
| + | background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | 3. Mini Modernizr | ||
| + | https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29 | ||
| + | |||
| + | 4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading. | ||
| + | <syntaxhighlight lang="javascript"> | ||
| + | // Wait for window load | ||
| + | $(window).load(function() { | ||
| + | // Animate loader off screen | ||
| + | $(".loader-icon").fadeOut("slow");; | ||
| + | }); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == Beispiel 2 == | ||
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links. | (Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links. | ||
Aktuelle Version vom 24. April 2022, 10:05 Uhr
https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets
Beispiel 1 mit no-js Check[Bearbeiten]
Der Loader berücksichtigt das no-js Tag im <html> und wird nicht angezeigt wenn kein JavaScript vorhanden ist. 1. Add a div just after <body> tag.
Direkt nach <body>
<div class="loader-icon"></div>
2. CSS
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.loader-icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
}
3. Mini Modernizr
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29
4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".loader-icon").fadeOut("slow");;
});
Beispiel 2[Bearbeiten]
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.
HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<!-- Page Loader
========================================================= -->
<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>
<!-- Edit With Your Name -->
<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>
<!-- /Edit With Your Name -->
</div>
</div>
<!-- /End of Page loader
========================================================= -->
CSS
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}
JavaScript
//Begin - Window Load
$(window).load(function(){
//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);
});
