Square Loading animation using clip-path

index.html

<div></div>

Square-Loading-animation-using-clip-path.markdown

Square Loading animation using clip-path

Square Loading animation using clip-path example.

A Pen by Elior Shalev Tabeka on CodePen.

License.

style.scss

@import "compass/css3";
@import "compass/css3";
$color : hsl(30,11%,94%);
$duration : 1.75s;

$a : 0% 0%, 0% 100%, 2% 98%, 2% 2%, 98% 2%, 98% 98%, 0 98%, 0 100%, 100% 100%, 100% 0;
$b : 0% 0%, 0% 100%, 2% 98%, 2% 2%, 98% 2%, 98% 0, 0 0, 0 100%, 100% 100%, 100% 0;

@mixin path($path) {
  -webkit-clip-path: polygon($path);
  clip-path: polygon($path);
}

html, body { 
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(164,50%,25%);
  overflow: hidden;
  animation: spin $duration*1 ease-in-out infinite;
}

div {
  width: 100%;
  height: 100%;
  max-width: 50px;
  max-height: 50px;
  background: $color;
  animation: loader $duration ease-in-out infinite both;
}

@keyframes loader {
  0% {
    @include path($a);
  }
  50% {
    @include path($b);
  }
  100% {
    @include path($a);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}