Triangle Loading animation using clip-path

index.html

<div></div>

style.scss

@import "compass/css3";
@import "compass/css3";
$color : hsl(30,11%,94%);
$background : hsl(354,63%,40%);
$duration : 1.25s;

$a : 0 48%, 49% 100%, 100% 48%;

@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: $background;
  overflow: hidden;
  animation: spin $duration cubic-bezier(1.000, -0.530, 0.405, 1.425) infinite;
}

div {
  @include path($a);
  width: 100%;
  height: 100%;
  max-width: 20px;
  max-height: 20px;
  background: $color;
}

@keyframes spin {
  to {
    transform: rotate(2turn);
  } 
}

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

Triangle Loading animation using clip-path

Triangle Loading animation using clip-path example.

A Pen by Elior Shalev Tabeka on CodePen.

License.