How to create a circular countdown timer using HTML, CSS or JavaScript?

Question

Currently, I am working on a quiz game and in that, for each question, I wish to place a countdown timer. I got some plugins, but I wish if I could create it myself. What I am trying to create looks like the one in the image below.Can you please tell me how I can do it?

Is there a way to assign a border to only up to a specified percentage of the perimeter, so that I could give a border, first in full, and then as each second advances, I can keep decreasing/increasing it so that I would get it in the perfect way.

The timer I wish to create should look somewhat like this (hope you understand how its blue border will increase every second):

enter image description here

almost the same question here: stackoverflow.com/questions/18835477/… — cdm
– cdm, Commented Apr 15, 2015 at 12:06
May not be 100% exactly as you want but you should get some ideas here - stackoverflow.com/questions/13059190/… — Harry
– Harry, Commented Apr 15, 2015 at 12:12

Turnip · Accepted Answer · 2022-03-21 14:29:28Z

63

Here is something i was playing around with a while ago. It uses a combination of SVG, css transitions and javascript. You should be able to rip it apart and use as a starting point...

/**
* The setTimeout({},0) is a workaround for what appears to be a bug in StackSnippets.
* It should not be required. See JSFiddle version.
*/

setTimeout(function() { 

  var time = 10; /* how long the timer will run (seconds) */
  var initialOffset = '440';
  var i = 1

  /* Need initial run as interval hasn't yet occured... */
  $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

  var interval = setInterval(function() {
      $('h2').text(i);
      if (i == time) {      
        clearInterval(interval);
        return;
      }
      $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
      i++;  
  }, 1000);

}, 0)

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="70" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

JSFiddle version

edited Mar 21, 2022 at 14:29

answered Apr 15, 2015 at 12:18

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toniq Over a year ago

How did you get 440?

Turnip Over a year ago

@Toniq The radius(r) of the circle is ~70 which creates a circumference of 440.

Machavity · Accepted Answer · 2024-08-19 11:10:09Z

-3

you should look at my jquery plugin Knob https://github.com/aterrien/jQuery-Knob, generated canvas circular input, and set timer behavior like :

var time = 0,
    maxTime = 60;
$('#dial').knob({
  readOnly : true,
  thickness : 0.1,
  max : maxTime
});


setInterval(function() {
  if(time>maxTime) time = 0;
  time++;
  $('#dial')
        .val(time)
        .trigger('change');
}, 1000);

I made a codepen here : http://codepen.io/pik_at/pen/azeYRg

edited Aug 19, 2024 at 11:10

Machavity♦

31.8k27 gold badges97 silver badges108 bronze badges

answered Apr 15, 2015 at 12:26

Pik_at

1,4579 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to create a circular countdown timer using HTML, CSS or JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related