Page Loader - Beispiele - Versionsgeschichte

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

2022-04-24T09:05:20Z

Beispiel 1 jquery mini-modernizr

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

2022-04-24T09:03:00Z

Beispiel 1 jquery mini-modernizr

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

2022-04-24T09:01:49Z

Beispiel 1 jquery mini-modernizr

134.3.74.15 am 24. April 2022 um 09:01 Uhr

2022-04-24T09:01:25Z

134.3.74.15 am 24. April 2022 um 07:58 Uhr

2022-04-24T07:58:56Z

37.49.32.84: Die Seite wurde neu angelegt: „== Beispiel 1 == (Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links. HTML - direkt hinter body Tag (Beispiel aus Proces…“

2017-07-13T14:21:39Z

Die Seite wurde neu angelegt: „== Beispiel 1 == (Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links. HTML - direkt hinter body Tag (Beispiel aus Proces…“

Neue Seite

== Beispiel 1 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

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

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="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;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="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);

});
</syntaxhighlight>

@@ Zeile 2: / Zeile 2: @@
   https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets
-== Beispiel 1 jquery mini-modernizr==
+== 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.
 . Add a div just after <body> tag.
 '''Direkt nach <body>'''
 <syntaxhighlight lang="html5">
-  <div class="pl-icon"></div>
+  <div class="loader-icon"></div>
 </syntaxhighlight>
@@ Zeile 15: / Zeile 15: @@
 .no-js #loader { display: none;  }
 .js #loader { display: block; position: absolute; left: 100px; top: 0; }
-.pl-icon {
+.loader-icon {
 	position: fixed;
 	left: 0px;
@@ Zeile 34: / Zeile 34: @@
 $(window).load(function() {
 	// Animate loader off screen
-	$(".pl-icon").fadeOut("slow");;
+	$(".loader-icon").fadeOut("slow");;
 });
 </syntaxhighlight>

@@ Zeile 7: / Zeile 7: @@
 '''Direkt nach <body>'''
   <div class="pl-icon"></div>
 . CSS

@@ Zeile 22: / Zeile 22: @@
 	background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
+}
 . Mini Modernizr

@@ Zeile 1: / Zeile 1: @@
   https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
   https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets
 == Beispiel 1 ==
 (Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

← Nächstältere Version		Version vom 24. April 2022, 07:58 Uhr
Zeile 1:		Zeile 1:
		+	https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
		+	https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets
	== Beispiel 1 ==		== Beispiel 1 ==
	(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.