I'm having trouble stoping the interval with clearInterval when the value reaches 100. It reaches a 100 and then keeps on executing the setInterval. Can anybody tell me what i'm doing wrong? Appreciate for your help.

i've provided a link to jsfiddle. Open console.log to see the incrementation. https://jsfiddle.net/netzsqx4/

let values = [[]]
let Circle_1 = {
  procent:values[0][0],
  startFrom:0,
  incrementBy:0,
  start: null,
  intervalIdAtStart: function(){this.start= setInterval(function(){drawCircle.call(Circle_1)},500)},
  clear: function() {
    clearInterval(this.start);
  }

}


function drawCircle(inputValues){  
    if(this.startFrom<this.procent){
        console.log('draw <', this.procent + "     " + this.startFrom)
    this.startFrom++
    }
    else if(this.startFrom>this.procent){
        console.log('draw >', this.procent + "     " + this.startFrom)
      this.startFrom--
    }
    else{
        console.log('else', this.procent + "     " + this.startFrom)
        this.clear;
    }
  };


  function Http(){
    
    let output = 100
    loadoutput(output)

    function loadoutput(input){

        console.log(input)
        
        values = [
            [input], 
        ]

        Circle_1.procent=values[0][0]
        Circle_1.intervalIdAtStart()
    }
  }

function getValues(){
  Http();
}

  setTimeout(getValues,1000);