<span class="load-more"></span>
<!--
  From flat.social
  Take a look at the live version!
  http://flat.social/ysfu/frontend/grid
-->

body {
  background-color: #4a4047;
}
.load-more {
  position: absolute;
  display: block;
  cursor: pointer;
  width: 40px; height: 40px;
  top: 50%; left: 50%;
  margin: -20px 0 0 -20px;
}
  .load-more:before,
  .load-more:after {
    position: absolute;
    display: block;
    content: '';
    width: 30px; height: 30px;
    left: 50%; top: 50%;
    margin-top: -15px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #fff;
    border-right-color: #fff;
    border-radius: 0 0 5px 0;

    transform: translate(-50%, -50%) rotate(45deg);

    transition: all .4s ease-in-out;
  }
  .load-more.active:before {
    border-radius: 50%;
    animation:
      .8s rotate .4s linear forwards infinite;
  }
  .load-more.active:after {
    width: 38px; height: 38px;
    border-radius: 50%;
    animation:
      .8s rotate2 .4s linear forwards infinite;
  }
    @keyframes rotate {
      to {
        transform: translate(-50%, -50%) rotate(405deg);
      }
    }
    @keyframes rotate2 {
      to {
        transform: translate(-50%, -50%) rotate(-315deg);
      }
    }
  .load-more.disabled:before,
  .load-more.disabled:after {
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(135deg) rotateY(180deg);
  }

var page = 1,
    moving = false;
var animationIteration = "animationiteration webkitAnimationIteration mozAnimationIteration oAnimationIteration oanimationiteration",
  transitionEnd      = "transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd";
$(".load-more").on("click", function() {
  if ( moving == false ) {
    moving = true;
    $(".load-more").addClass("active");
    setTimeout(function() {
      $(".load-more").one(animationIteration, function() {
        $(".load-more").removeClass("active");
        $(".load-more").one(transitionEnd, function() {
          page++;
          moving = false;
        });
      });
    }, 2000);
  }
});