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;
}

Thank you for the editing, I'll be more careful next time in the formatting of future questions — Randy Goldsmith, Dec 21 '15 at 06:08

score 2 · Answer 1 · edited May 23 '17 at 11:45

2

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

edited May 23 '17 at 11:45

Community

1
1

answered Dec 21 '15 at 05:56

Quantumplate

1,104
8
15

A guy gave me his code and used another way to fill the circle.. basically he set a height of circle, found a way to get the height and then would fill the circle. I just didn't understand the code nor did I just want to copy because I want to understand it and try it on my own. I was also trying to avoid the canvas way but will be more than happy to try and implement it. Here is the link and maybe you can better explain it if you want. [link] (http://codepen.io/MutantSpore/pen/xwBpxE) Thank you I will start researching canvas method! – Randy Goldsmith Dec 21 '15 at 06:01
Yeah there are probably other ways of doing it. Canvas is just what I would use as it's designed for displaying graphics like this (and more complicated). – Quantumplate Dec 21 '15 at 06:08
If you inspect the teal element in that example as it moves you'll see it's just a div at the bottom where the height is increasing with time. The div is inside a parent div with rounded corners which clip it. So just clever use of elements. I was thinking you were after a sector (e.g. fill rotating around like a second hand on clock) which is a little harder. – Quantumplate Dec 21 '15 at 06:11
Hm, using the canvas and arc method means I will get into SVG which I was trying to avoid. There is no specific reason why but if that is the quickest and most efficient way to help my problem i will apply it. – Randy Goldsmith Dec 21 '15 at 06:12

Fill a circle over time

1 Answers1