Comment créer une circulaire du compte à rebours de la minuterie à l'aide de HTML, CSS ou JavaScript?

Actuellement, je travaille sur un jeu de quiz et en ce que, pour chaque question, je souhaite passer d'un compte à rebours. J'ai eu quelques plugins, mais j'aimerais si je pouvais créer moi-même. Ce que je suis en train de créer ressemble à celui dans l'image ci-dessous.Pouvez-vous svp me dire comment je peux faire?

Est-il un moyen pour attribuer une bordure à seulement jusqu'à un certain pourcentage du périmètre, de sorte que je puisse donner à une frontière, d'abord, et ensuite parce que chaque seconde avances, je peux garder la diminution/augmentation de sorte que je ne l'obtenir d'une manière parfaite.

La minuterie je souhaite créer devrait ressembler à quelque chose comme ceci (j'espère que vous comprenez comment sa bordure bleue va augmenter à chaque seconde):

Comment créer une circulaire du compte à rebours de la minuterie à l'aide de HTML, CSS ou JavaScript?

Nous ne sommes pas ici pour faire le codage pour vous. Qu'avez-vous essayé? Nous sommes sommes ici pour guide/vous aider avec vos problèmes de codage de ne pas faire tout le travail pour vous. Merci de poster ce que vous avez essayé jusqu'à présent.
Je n'ai jamais demandé de faire l'ensemble de codage pour moi, frère.Je voulais juste savoir si il existe un moyen de donner de la circulaire frontière à seulement jusqu'à une certaine largeur.Je vous remercie.
presque la même question ici: stackoverflow.com/questions/18835477/...
Vous êtes à la recherche de: github.com/PragmaticMates/jquery-final-countdown ?
Peut-être pas 100% exactement comme vous le voulez, mais vous devriez obtenir quelques idées ici - stackoverflow.com/questions/13059190/...

OriginalL'auteur Arun Sivaraj | 2015-04-15

  1. 0

    vous devriez regarder le plugin jquery Bouton https://github.com/aterrien/jQuery-Knob, généré toile circulaire d'entrée et régler le minuteur de comportement (par exemple :

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

    J'ai fait un codepen ici : http://codepen.io/pik_at/pen/azeYRg

    OriginalL'auteur Pik_at