Circle Loading animation using clip-path

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

Circle Loading animation using clip-path

Circle Loading animation using clip-path example.

A Pen by Elior Shalev Tabeka on CodePen.

License.

index.html

<div></div>
<div></div>

style.scss

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

$a : 40% at 50% 50%;
$b : 25% at 50% 50%;

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

html, body { 
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: $background;
  overflow: hidden;
  animation: spin $duration ease-in-out infinite;
}

div {
  width: 100%;
  height: 100%;
  max-width: 20px;
  max-height: 20px;
  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 {
  to {
    transform: rotate(5turn);
  }
}