Fill a circle over time

Question

I am doing a project where I created a countdown timer using JavaScript. It features stop-, start-, and reset buttons.

I want to create a fill effect animation starting from the bottom, based on the countdown timer. I want the fill effect to fill a certain percentage of the circle so that when the countdown reaches 0, the whole circle will be filled.

I want to use vanilla JavaScript. No jQuery or SVG.

Here is my code so far for the basic timer starting with HTML, then CSS and my Javascript code.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<h1>Pomodoro Clock</h1>

<div class="container">
  <div class="row">
    <h3>Session Length</h3>
     <div class="row button1">
       <button type="button" onclick="decreaseTime()">-</button>
       <span id="SessionLength">25</span>
       <button type="button" onclick="increaseTime()">+</button>
 </div> 

  </div>

 <!--My Start/Stop/Reset buttons-->
  <div class="row">
<div class="myButtons">
 <button type="button" onclick="startTime()">Start</button>
 <button type="button" onclick="stopTime()">Stop</button>
 <button type="button" onclick="resetTime()">Reset</button>
</div>  


  </div>

  <!--My Circle-->
  <div class="row">
   <div class="circleDraw">
     <h2 class="text-center">Session</h2>
     <h1 id="output">25:00</h1>

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

h1{
  text-align: center;
}

h3{
  text-align: right;
  padding-right: 30%;
}

.myButtons{
  text-align: center;
  padding-top: 10%;

}

.circleDraw{
  border-radius: 50%;
  border: 2px solid;
  width: 300px;
  height: 300px;
  margin: 50px auto;

}

.text-center{
  text-align: center;
  padding: 30px;
}

.txt-center{
  text-align: center;
}

.button1{
  text-align: right;
  padding-right: 35%
}

var time = 1500;
var running = 0;
var myStopID;



var startTime = function(){
  running = 1;
  if(running == 1){
    timer();
  }
}

var stopTime = function(){
    clearTimeout(myStopID);
    running = 0;
  }



var resetTime = function(){
  if(running == 0){
   time = 1500;
  }
 var min = Math.floor(time / 60);
 var sec = time % 60;  

 min = min < 10 ? "0" + min : min;
 sec = sec < 10 ? "0" + sec : sec;

 document.getElementById('output').innerHTML= min;           
 document.getElementById('SessionLength').innerHTML= min;
}


var timer = function(){
  if(running == 1){
   myStopID = setTimeout(function(){
    time--;
    var min = Math.floor(time / 60);
    var sec = time % 60;

    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    document.getElementById("output").innerHTML= min + ":" + sec;


    timer();
     }, 1000);
  }
}

function decreaseTime(){
  if(time <= 0){
    return 0;
  }

  time = time - 60;
  var min = Math.floor(time/60);

 document.getElementById('SessionLength').innerHTML= min;
  document.getElementById('output').innerHTML= min;
}

function increaseTime(){
  if(time >= 5940){
    return 5940;
  }
  time = time + 60;
  var min = Math.floor(time/60);

 document.getElementById('SessionLength').innerHTML= min;
  document.getElementById('output').innerHTML= min;
}

Answer 1

What you have done so far looks good. I'd look at using the canvas element and the arc() method on that to draw the circle and partial fill.

More info here...

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

And basic Canvas and SVG example for drawing a circle in this answer...

https://stackoverflow.com/a/6936351/4322803