loading animation

by Ercan Cicek

HTML

<div id="outerCircle" class="flex-it">
  <div id="innerCircle"></div>
  <canvas id="stripeCanvas"></canvas>  
  <div id="dot-wrapper">
    <div id="dot-cont1" class="dot-container">
      <div></div>
    </div>
    <div id="dot-cont2" class="dot-container">
      <div></div>
    </div>
    <div id="dot-cont3" class="dot-container">
      <div></div>
    </div>
  </div>
</div>

SCSS

$circleSize: 14em;
$dotSize: $circleSize * 0.075;

#outerCircle {
  position: relative;
  width: $circleSize;
  height: $circleSize;
  border-radius: 50%;
  border: 1px solid #EC407A;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

#innerCircle {
  position: relative;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 1px solid #8EE4AF;
  background-color: #8EE4AF;
}

#stripeCanvas {
  position: absolute;
  animation: rotateLin 3s linear infinite;
}

#dot-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dot-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#dot-cont1 {
  animation: rotateDot1 2s ease 0s infinite;
  transform: rotate(-10deg);
}

#dot-cont2 {
  animation: rotateDot2 2s ease .1s infinite;
  transform: rotate(0deg);
}

#dot-cont3 {
  animation: rotateDot3 2s ease .2s infinite;
  transform: rotate(10deg);
}

.dot-container > div {
  position: absolute;
  bottom: 0.75%;
  left: calc(50% - (#{$dotSize} / 2));
  width: $dotSize;
  height: $dotSize;
  border: 1px solid #000000;
  border-radius: 50%;
  background-color: #EDF5E1;
}

@keyframes rotateLin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateDot1 {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(380deg);
  }
}

@keyframes rotateDot2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateDot3 {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(340deg);
  }
}

.flex-it {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

$(init);

  function init() {
    drawStripeCanvas(0, 0.5 * Math.PI); // --- init canvas arc
  }

  function drawStripeCanvas(startAngle, endAngle) {
    var wndw = { 
      w: $("#outerCircle").width(), 
      h: $("#outerCircle").height()
    },
        canvas = $("#stripeCanvas")[0],
        context = canvas.getContext('2d'),
        lineWidth = (wndw.h >= wndw.w ? wndw.w : wndw.h) * 0.08; // --- in px
    canvas.width = wndw.w;
    canvas.height = wndw.h;
    context.beginPath();
    context.arc(
      canvas.width / 2, // --- center of circle - x coord
      canvas.height / 2, // --- center of circle - y coord
      ((wndw.h >= wndw.w ? wndw.w : wndw.h) / 2) - (lineWidth / 2) - ((wndw.h >= wndw.w ? wndw.w : wndw.h) * 0.01),  // --- radius
      startAngle, 
      endAngle, 
      false
    );
    context.lineWidth = lineWidth;
    context.strokeStyle = "#8EE4AF";
    context.stroke();
    context.closePath();
  }