gistfile1.txt

function rotateCircle(targetCircle, degrees) {
  let circleOne = document.querySelector(targetCircle);
  circleOne.style.transform = 'rotate(' + degrees + 'deg)';
}

let targetD = -45;

function setD(f){
  targetD = f;
}

function addD(f){
  targetD += f;
}

//example: f = 10 so targetD = 10

let displayedD = -45;

function step(){
  
  let diff = targetD - displayedD ; //diff = 10 - 0 initially, so targetD = 10
  displayedD += diff * 0.075; // d = 10 x 0.075 = 0.75
  
  rotateCircle('.circle', displayedD);
  if(displayedD < 315 ){
      window.requestAnimationFrame(step);    
    // remember: step.bind.this
    //maybe this.step = step.bind.this
  }
}

window.requestAnimationFrame(step);

// ------------------------------------------------------------------------- spinner object created below

function Spinner(target) {
  this.target = target;
  this.init();
}

function initSpinnerHtml() {
  const containingEl = document.querySelector(this.target);
    // this.spinner = document.createElement('div');
    // containingEl.appendChild(this.spinner);
    let spinnerContainer = document.createElement('div');
    spinnerContainer.classList.add('spinner-container');
    spinnerContainer.innerHTML = '<div class="container"><div class="circle circle-one"></div></div><div class="container container-two"><div class="circle circle-two"></div></div> <a href="#" onclick="setD(10)"> 10</a><a href="#" onclick="setD(36)"> 36</a><a href="#" onclick="addD(10)"> +10</a>';
    containingEl.appendChild(spinnerContainer);
}

Spinner.prototype.init = function() {
    initSpinnerHtml.call(this);
}

  var spin = new Spinner('.example-container');

   function removeSpinnerHtml() {
     const containingEl = document.querySelector(this.target);
     let spinner = containingEl.querySelector('.ao__icon--logo');
     spinner.parentNode.removeChild(spinner);
   }



  Spinner.prototype.remove = function() {
   removeSpinnerHtml.call(this);
   }