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