LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
running dog loader loading ...

Demo Content for page transition

Some Demo text is always good to check click
CSS
.page-transition {
  background-color: white;
  color: #666;
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  -webkit-transition: width 0.8s cubic-bezier(0.22, 0.94, 1, 1.01) 0.2s;
  transition: width 0.8s cubic-bezier(0.22, 0.94, 1, 1.01) 0.2s;
  vertical-align: center;
  overflow: hidden;
}
.page-transition--showContent {
  width: 0;
}
.page-transition--showContent .loader {
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  opacity: 0;
}
.page-transition--hideContent {
  right: auto;
  left: 0;
  width: 100vw;
}
.page-transition--hideContent .loader {
  -webkit-transition: opacity .2s linear .6s;
  transition: opacity .2s linear .6s;
}
.page-transition .loader {
  display: inline-block;
  height: 1em;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.page-transition .loader img {
  display: block;
}
.page-transition .loader span {
  -webkit-animation: blink .6s infinite alternate;
          animation: blink .6s infinite alternate;
}

@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
JS
$(function(){
  var loader = $('.page-transition .loader').first();
  window.setTimeout(pageTransition,1300);
  
  $(document).on('click','a',interceptLink);
});

// intercept link clicks and do some random things (important -> get duration for url loading directly from animation)
function interceptLink(e){
  e.preventDefault();
  var href = $(this).attr('href');
  var duration = $('.page-transition').css('transition-duration').slice(0,-1)*1000;
  pageTransition();
  loadUrl(href,duration);
};

// load url but first wait for effect to end
function loadUrl(href,duration){
  if(duration){
    console.log('moving to '+href+' after '+duration);
    window.setTimeout(function(){
      location.href = href;
    },duration);
  }
  else {
    location.href = href;
  }
}

// toggle transition effect by toggling classes
function pageTransition(){
  var trans = $('.page-transition').first();
  var baseClass = 'page-transition';
  var showClass = baseClass+'--showContent';
  var hideClass = baseClass+'--hideContent';
  
  if(!trans.hasClass(showClass)){
    trans.removeClass(hideClass).addClass(showClass);
  }
  else {
    trans.removeClass(showClass).addClass(hideClass);
  }
}

Description

Free animation referred from https://icons8.com/preloaders
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv