halfmagic
11/18/2019 - 1:29 AM

Circular timer animation

function startTimer(duration, myobject) { // refactoring needed base on nmyobject & resetting animation
  myobject.closest('.point').find('.right-circle').hide()
  myobject.closest('.point').find('.pie').addClass('left-mask')
  myobject.closest('.point').find('.pie').removeClass('no-mask')
  // $('.point .pie').removeClass('right-mask')
  let timer = duration

  let timeleft = ((duration * 1000) / 2) + 2000;
  setTimeout(function() {
    hideRightHalf(myobject)
  }, timeleft)

  let interval = setInterval(function () {

    let percent = 100 - (timer * 100 / duration)
    let degree = (percent * 360) / 100

    myobject.closest('.point').find('.left-circle').css({transform : 'rotate('+ degree +'deg)',transition:'1s linear'})
    if (--timer < 0) {
      timer = duration
      clearInterval(interval)
      myobject.closest('.point').addClass('ready')
      //check if all timer are done
      if (myobject.closest('.point').hasClass('ready')) {
        setTimeout(function() {
          myobject.closest('.point').find('.pie').removeClass('auto')
          myobject.closest('.point').find('.left-circle').css({transform : 'rotate(0deg)', transition:'0s'})
          myobject.closest('.point').removeClass('ready')
        }, 1000)
      }
    }
  }, 1000)
  function hideRightHalf(myobject){
    myobject.closest('.point').find('.pie').removeClass('left-mask')
  	myobject.closest('.point').find('.pie').addClass('no-mask')
  	myobject.closest('.point').find('.right-circle').show()
  }
}