Page Loader - Beispiele

Aus Wikizone
Wechseln zu: Navigation, Suche
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);

});
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Page_Loader_-_Beispiele&oldid=26064“