<h1> Cronómetros</h1>
<p>Este script permite obtener varios cronómetros en un mismo sitio pasando el id contenedor y el tiempo de duración, también una vez que finaliza la cuenta regresiva mantiene el cronometro 5 segundos y luego lo elimina. Con la ayuda de Swipe.js hacemos que tenga la posibilidad de ser un slider drag&drop apto para mobile</p>
<hr />
<!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
<div id="cron1" class="cron swiper-slide">  
  <div class="cron-border">
    <div class="cron-cont">
      <div class="fill fl">
      </div>
      <div class="fillb">
      </div>
      <div class="fill fr">
      </div>
    </div>
    <div class="time">
      minutes
    </div>
  </div>
</div>
<div id="cron2" class="cron swiper-slide">  
  <div class="cron-border">
    <div class="cron-cont">
      <div class="fill fl">
      </div>
      <div class="fillb">
      </div>
      <div class="fill fr">
      </div>
    </div>
    <div class="time">
      minutes
    </div>
  </div>
</div>
<div id="cron3" class="cron swiper-slide">  
  <div class="cron-border">
    <div class="cron-cont">
      <div class="fill fl">
      </div>
      <div class="fillb">
      </div>
      <div class="fill fr">
      </div>
    </div>
    <div class="time">
      minutes
    </div>
  </div>
</div>
                  </div>
    </div>

.cron{
  position:relative;
  width:450px;
  margin: 0 auto;
  text-align:center;
  color:#fff;
  padding:20px auto;
}

.cron-border{
  width:200px;
  height:200px;
  border-radius:100%;
  background:#3b82ba;
  position:relative;
  padding:10px; 
  margin:0 auto;
}

.cron-cont{
  width:200px;
  height:200px;
  border-radius:100%;
  background:#c00;
  position:relative;
  margin:0 auto;
  overflow:hidden;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}

.time{
  position:absolute;
  display:block;
  color:#000;
  font-weight:bold;
  z-index:2;
  top:50%;
  font-size:50px;
  text-align:center;
  margin-top:-25px;
  width:100%;
  margin-left:-10px;
}

.fill{
  width:100px;
  height:200px;
  margin:0;
  padding:0;
  float:left; 
}

.fillb{    
  background:#c00;
  width:100px;
  height:200px;
  margin:0;
  padding:0;
  position:absolute;
  margin-left:100px;
}

.fr{  
  background:#4ba8f1;
  animation-iteration-count: 1;
  transform-origin: 0% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  
  -o-animation-iteration-count: 1;
  -o-transform-origin: 0% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 0% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.fl{  
  background:#4ba8f1;
  animation-iteration-count: 1;
  transform-origin: 100% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 100% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 100% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  
  -o-animation-iteration-count: 1;
  -o-transform-origin: 100% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 100% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes aniTime{
  0% {
    opacity:1;
    transform:  rotate(0deg) ;
  }
  99% {
    opacity:1;
    transform:  rotate(178deg) ;
  }
  100% {
    opacity:0;
    transform:  rotate(180deg) ;
  }
  100% {
    opacity:0;
    transform:  rotate(180deg) ;
  }
}

@-moz-keyframes aniTime{
  0% {
    opacity:1;
    -moz-transform:  rotate(0deg) ;
  }
  99% {
    opacity:1;
    -moz-transform:  rotate(178deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  rotate(180deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  rotate(180deg) ;
  }
}

@-webkit-keyframes aniTime {
  0% {
    opacity:1;
    -webkit-transform:  rotate(0deg) ;
  }
  99% {
    opacity:1;
    -webkit-transform:  rotate(178deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  rotate(180deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  rotate(180deg) ;
  }
}

@-o-keyframes aniTime {
  0% {
    opacity:1;
    -o-transform:  rotate(0deg) ;
  }
  99% {
    opacity:1;
    -o-transform:  rotate(178deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  rotate(180deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  rotate(180deg) ;
  }
}

@-ms-keyframes aniTime {
  0% {
    opacity:1;
    -ms-transform:  rotate(0deg) ;
  }
  99% {
    opacity:1;
    -ms-transform:  rotate(178deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  rotate(180deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  rotate(180deg) ;
  }
}

function cron(id, min) {
  
  var half = min * 60 / 2;
  var style = 'aniTime linear ' + half + 's';
  var delay = half + 's';
  $(id +' .fl,'+ id +' .fr').css({'animation':style,'-webkit-animation':style,'-moz-animation':style,'-o-animation':style,'-ms-animation':style});

  $(id + ' .fl').css({'animation-delay':delay});

  $(id +' .fl,'+ id +' .fr').addClass( 'disappear' ).on( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend',      function(){
    $( this ).remove();
});

var ms = half * 2000;

if (min <= 2){
    $(id + ' .time').html("Llegando");
    navigator.vibrate(1000);
  }else{
    $(id + ' .time').html(min+"\'");
  }

var interval = setInterval(function() {
  min--;
  if (min == 0){
    setTimeout(function() {
      $(id).remove();
    }, 5000);
  }else if (min <= 2){
    $(id + ' .time').html("Llegando");
    navigator.vibrate(1000);
  }else{
    $(id + ' .time').html(min+"\'");
  }
}, 60000);
};

cron('#cron1', 3);
cron('#cron2', 2);
cron('#cron3', 5);
var swiper = new Swiper('.swiper-container');

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js