<div class="container">
<h1>Cronómetro </h1>
<p>Desde el JS podemos configurar la cantidad de minutos cambiando el valor de la variable <strong>loops</strong></p>
  <p>Para su funcionamiento se utiliza <strong>CSS3</strong> y <strong>JQuery</strong>
  </p>
  <hr />
<div class="estructura">
  <div class="interior">
  </div>
  <div class="tiempo">
  </div>
</div>
</div>
.container{
  text-align:center;
  padding:0 20px;
  font-family:sans-serif;
  font-size:1em;
}

.estructura, .interior{
  width:320px;
  height:320px;
  position:relative;
  border-radius:50%;
}

.tiempo{
  position: absolute;
  font-size: 100px;
  text-align: center;
  width: 200px;
  height: 200px;
  z-index: 100;
  color: #fff;
  top: 50%;
  left:50%;
  margin-left:-100px;
  margin-top: -100px;
  background:#000;
  border-radius:50%;
  line-height:200px;
}

.estructura{
  overflow:hidden;
  z-index: 10;
  border:20px solid #000;
  margin:20px auto;
}

.interior{  
background-image: -webkit-gradient(
	linear,
	right top,
	left top,
	color-stop(0, #FFFFFF),
	color-stop(0.48, #FFFFFF),
	color-stop(0.5, #CC0000),
	color-stop(0.52, #FFFFFF),
	color-stop(1, #FFFFFF)
);
  
  background-repeat: no-repeat;
    background-position:50% 0%; 
   background-size: 50% 50%;
  
background-image: -o-linear-gradient(left, #FFFFFF 0%, #FFFFFF 48%, #CC0000 50%, #FFFFFF 52%, #FFFFFF 100%);
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #FFFFFF 48%, #CC0000 50%, #FFFFFF 52%, #FFFFFF 100%);
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 48%, #CC0000 50%, #FFFFFF 52%, #FFFFFF 100%);
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #FFFFFF 48%, #CC0000 50%, #FFFFFF 52%, #FFFFFF 100%);
background-image: linear-gradient(to left, #FFFFFF 0%, #FFFFFF 48%, #CC0000 50%, #FFFFFF 52%, #FFFFFF 100%);
}

.interior{
  animation: tiempo linear 60s;
  transform-origin: 50% 50%;
  -webkit-animation: tiempo linear 60s;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tiempo linear 60s;
  -moz-transform-origin: 50% 50%;
  -o-animation: tiempo linear 60s;
  -o-transform-origin: 50% 50%;
  -ms-animation: tiempo linear 60s;
  -ms-transform-origin: 50% 50%;
}

@keyframes tiempo{
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}

@-moz-keyframes tiempo{
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}

@-webkit-keyframes tiempo {
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}

@-o-keyframes tiempo {
 0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}

@-ms-keyframes tiempo {
 0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}
var loops = 3;

$('.interior').css({'animation-iteration-count': loops, '-moz-animation-iteration-count': loops, '-webkit-animation-iteration-count': loops, '-o-animation-iteration-count': loops, '-ms-animation-iteration-count': loops});

var counter = loops;
$('.tiempo').html(counter+"\'");
var interval = setInterval(function() {
    counter--;
  if(counter==0){
    $('.tiempo').html("YA!");
    clearInterval(interval);
  }else{    
    $('.tiempo').html(counter+"\'");
  }  
}, 60000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js