load.css

@import "lesshat";

/* INSPIRATION: http://drbl.in/1945392 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);


// LOADING 
// ---------
.loading{
  position:absolute;
  left:50%;
  top:50%;
  margin:-35px 0 0 -56px;
  .size(112px, 70px);
  .c;

  .finger{
    float:left;
    margin:0 2px 0 0;
    .size(20px, 100%);
  }
  .finger-1{
    .animation(finger-1-animation, 2s, infinite, ease-out);

    span{
      .animation(finger-1-animation-span, 2s, infinite, ease-out);
    }
    i{
      .animation(finger-1-animation-i, 2s, infinite, ease-out);
    }
  }
  .finger-2{
    .animation(finger-2-animation, 2s, infinite, ease-out);
    
    span{
      .animation(finger-2-animation-span, 2s, infinite, ease-out);
    }
    i{
      .animation(finger-2-animation-i, 2s, infinite, ease-out);
    }
  }
  .finger-3{
    .animation(finger-3-animation, 2s, infinite, ease-out);

    span{
      .animation(finger-3-animation-span, 2s, infinite, ease-out);
    }
    i{
      .animation(finger-3-animation-i, 2s, infinite, ease-out);
    }
  }
  .finger-4{
    .animation(finger-4-animation, 2s, infinite, ease-out);

    span{
      .animation(finger-4-animation-span, 2s, infinite, ease-out);
    }
    i{
      .animation(finger-4-animation-i, 2s, infinite, ease-out);
    }
  }
  .finger-item{
    position:relative;
    .square(100%);
    .border-radius(6px 6px 8px 8px);
    background:#fff;
    
    span{
      position:absolute;
      left:0;
      top:0;
      .size(100%, auto);
      padding:5px 5px 0 5px;

      &:before,
      &:after{
        content:'';
        position:relative;
        display:block;
        margin:0 0 2px 0;
        .size(100%, 2px);
        background:#000000;
      }
    }
    i{
      position:absolute;
      left:3px;
      bottom:3px;
      .size(14px, 14px);
      .border-radius(10px 10px 7px 7px);
      background:#000000;
    }
  }
  .last-finger{
    position:relative;
    float:left;
    .size(24px, 100%);
    overflow:hidden;
  }
  .last-finger-item{
    position:absolute;
    right:0;
    top:32px;
    .size(110%, 20px);
    .border-radius(0 5px 14px 0);
    background:#fff;
    .animation(finger-5-animation, 2s, infinite, linear);

    i{
      position:absolute;
      left:0;
      top:-8px;
      .size(22px, 8px);
      background:#fff;
      overflow:hidden;

      &:after{
        content:'';
        position:absolute;
        left:0;
        bottom:0;
        .size(34px, 20px);
        .border-radius(0 0 15px 15px);
        background:#000000;
      }
    }
  }
}


// ANIMATION
// ---------
@keyframes finger-1-animation {
  0%   {padding:12px 0 5px 0;}
  20%  {padding:12px 0 5px 0;}
  29%  {padding:4px 0 24px 0;}
  35%  {padding:4px 0 24px 0;}
  41%  {padding:12px 0 5px 0;}
  100% {padding:12px 0 5px 0;}
}
@keyframes finger-1-animation-span {
  0%   {top:0;}
  20%  {top:0;}
  29%  {top:-7px;}
  35%  {top:-7px;}
  41%  {top:0;}
  100% {top:0;}
}
@keyframes finger-1-animation-i {
  0%   {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  20%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  29%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  35%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  41%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  100% {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
}

@keyframes finger-2-animation {
  0%   {padding:6px 0 2px 0;}
  24%  {padding:6px 0 2px 0;}
  33%  {padding:2px 0 16px 0;}
  39%  {padding:2px 0 16px 0;}
  45%  {padding:6px 0 2px 0;}
  100% {padding:6px 0 2px 0;}
}
@keyframes finger-2-animation-span {
  0%   {top:0;}
  24%  {top:0;}
  33%  {top:-7px;}
  39%  {top:-7px;}
  45%  {top:0;}
  100% {top:0;}
}
@keyframes finger-2-animation-i {
  0%   {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  24%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  33%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  39%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  45%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  100% {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
}

@keyframes finger-3-animation {
  0%   {padding:0 0 0 0;}
  28%  {padding:0 0 0 0;}
  37%  {padding:0 0 12px 0;}
  43%  {padding:0 0 12px 0;}
  49%  {padding:0 0 0 0;}
  100% {padding:0 0 0 0;}
}
@keyframes finger-3-animation-span {
  0%   {top:0;}
  28%  {top:0;}
  37%  {top:-7px;}
  43%  {top:-7px;}
  49%  {top:0;}
  100% {top:0;}
}
@keyframes finger-3-animation-i {
  0%   {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  28%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  37%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  43%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  49%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  100% {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
}

@keyframes finger-4-animation {
  0%   {padding:8px 0 3px 0;}
  32%  {padding:8px 0 3px 0;}
  41%  {padding:4px 0 20px 0;}
  47%  {padding:4px 0 20px 0;}
  53%  {padding:8px 0 3px 0;}
  100% {padding:8px 0 3px 0;}
}
@keyframes finger-4-animation-span {
  0%   {top:0;}
  32%  {top:0;}
  41%  {top:-7px;}
  47%  {top:-7px;}
  53%  {top:0;}
  100% {top:0;}
}
@keyframes finger-4-animation-i {
  0%   {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  32%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  41%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  47%  {bottom:8px;height:12px;.border-radius(7px 7px 4px 4px);}
  53%  {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
  100% {bottom:3px;height:14px;.border-radius(10px 10px 7px 7px);}
}

@keyframes finger-5-animation {
  0%   {top:32px;right:0;.border-radius(0 5px 14px 0);.rotate(0deg);}
  34%  {top:32px;right:0;.border-radius(0 5px 14px 0);.rotate(0deg);}
  43%  {top:20px;right:2px;.border-radius(0 8px 20px 0);.rotate(-12deg);}
  50%  {top:20px;right:2px;.border-radius(0 8px 20px 0);.rotate(-12deg);}
  60%  {top:32px;right:0;.border-radius(0 5px 14px 0);.rotate(0deg);}
  100% {top:32px;right:0;.border-radius(0 5px 14px 0);.rotate(0deg);}
}


// CREDITS
.credits-info{
  position:absolute;
  left:0;
  top:0;
  padding:20px 0 0 20px;
  opacity:50;
  
  h1{
    margin:0 0 25px 0;
    font-size:22px;
    font-weight:300;
    color:#fff;
  }
  p{
    margin:0 0 15px 0;
    max-width:320px;
    font-size:14px;
    font-weight:300;
    line-height:1.4em;
    color:#fff;
  }
  span{
    margin:0 5px;
    opacity:30;
  }
  a{
    color:#fff;
    border-bottom:1px solid #fff;
    text-decoration:none;
    
    &:hover{
      border-bottom:3px solid #fff;
    }
  }
}


// BODY
// ---------
*{
  -webkit-box-sizing: border-box;
   -khtml-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
body{
  font-family: 'Open Sans', sans-serif;
  background:#000000;
}


// MIXINS
// ---------
.c() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
.size(@width: 5px, @height: 5px) {
  width: @width;
  height: @height;
}
.square(@size: 5px) {
  .size(@size, @size);
}