Hand animation - loading

hand-animation-loading.markdown

Hand animation - loading

I really liked that little hand animation so I decided to recreate it in good pure CSS only. No JS was harmed.

A Pen by r4ms3s on CodePen.

License.

index.html

		<div class="loading">
  <div class="finger finger-1">
    <div class="finger-item">
      <span></span><i></i>
    </div>
  </div>
  			<div class="finger finger-2">
    <div class="finger-item">
      <span></span><i></i>
    </div>
  </div>
  			<div class="finger finger-3">
    <div class="finger-item">
      <span></span><i></i>
    </div>
  </div>
  			<div class="finger finger-4">
    <div class="finger-item">
      <span></span><i></i>
    </div>
  </div>
  			<div class="last-finger">
    <div class="last-finger-item"><i></i></div>
  </div>
		</div>

<div class="credits-info">
  <h1>Hand animation - loading</h1>
  <p>I really liked that little hand animation so I decided to recreate it in good pure CSS only.<br>No JS was harmed.</p>
  <p>Source on <a href="http://drbl.in/1945392" target="_blank">Dribbble</a>.</p>
  <p><a href="https://twitter.com/r4ms3scz" target="_blank">@r4ms3scz</a> <span>x</span> <a href="https://twitter.com/ToshTak" target="_blank">@ToshTak</a></p>
  <p>
    <a href=""></a>
  </p>
</div>

script.js

/*
	Nope. 
	There is no JS in here, it's pure CSS
*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

@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:#4492f4;
      }
    }
    i{
      position:absolute;
      left:3px;
      bottom:3px;
      .size(14px, 14px);
      .border-radius(10px 10px 7px 7px);
      background:#4492f4;
    }
  }
  .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:#4492f4;
      }
    }
  }
}


// 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:#4492f4;
}


// 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);
}