.loader.loader--active
  .loader__icon
    svg(version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve")
      path(opacity="0.2" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z")
      path(fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z")
      animateTransform(attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite")
  - var n = 0;
    while n < 5
      - n++;
      .loader__tile

.wrapper
  button.btn(type="button") Toggle page transition

$cyan: #007AE5;
$tiles: 5;

body {
  background-color: #eee;
}

.wrapper {
  height: 100vh;
  text-align: center;
  
  button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

.loader {
  $parent: &;

  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  transition: width 0s 1.4s ease;
  
  #{$parent}__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity .5s ease;
    
    svg {
      transform-origin: 0 0;
    }
  }
  
  #{$parent}__tile {
    position: absolute;
    left: 0;
    width: 0;
    height: 20%;
    background-color: $cyan;
    transition: width .7s ease;
    
    @for $i from 0 through $tiles {
      &:nth-child(#{$i}) {
        top: calc(#{$i - 1} * 20%);
        transition-delay: #{($i - 1) * 0.2s};
      }
    }
  }
  
  &--active {
    width: 100%;
    transition-delay: 0s;
    
    #{$parent}__icon {
      opacity: 1;
      transition: opacity .5s 1.4s ease;
    }
    
    #{$parent}__tile {
      width: 100%;

      @for $i from 0 through $tiles {
        &:nth-child(#{$i}) {
          transition-delay: #{($i - 1) * 0.2s};
        }
      }
    }
  }
}

var $loader = document.querySelector('.loader')

window.onload = function() {
  $loader.classList.remove('loader--active')
};

document.querySelector('.btn').addEventListener('click', function () {
  $loader.classList.add('loader--active')
  
  window.setTimeout(function () {
    $loader.classList.remove('loader--active')
  }, 5000)
})