<html>

<head>
  <title>Test Loading Animation</title>

</head>

<body>
  <div class="circle">
    <div class="outer">
      <div class="middle">
        <div class="inner">

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

</html>
$circleDimension: 200px;
$innerCircleDimension: ($circleDimension/100) * 40;
$middleCircleDimension: ($circleDimension/100) * 72;
body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  height: 50%;
  width: auto;
}
.circle {
  * {
    height: $circleDimension;
    width: $circleDimension;
    overflow: hidden;
    background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/outerRing.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
  }

  // margin-top: $circleDimension/2;

  .inner {
    background-size: $innerCircleDimension $innerCircleDimension;
    border-radius: 50%;
    background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/circleFull.svg);
    -webkit-animation: cw 1.5s infinite;
    animation: cw 1.5s infinite;
  }

  .middle {
    background-size: $middleCircleDimension $middleCircleDimension;
    background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/ring.svg);
    -webkit-animation: ccw 3s linear infinite;
    animation: cw 3s linear infinite;
  }
  .outer {
    -webkit-animation: cw 6s linear infinite;
    animation: cw 6s linear infinite;
  }
}

@-webkit-keyframes cw {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* Standard syntax */
@keyframes cw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ccw {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

/* Standard syntax */
@keyframes ccw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.