countdown

countdown.markdown

countdown

A Pen by Clint on CodePen.

License.

index.html

<div class="security-icons-container">
  <div class="countdown" data-no="1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-1" cx="48.24" cy="48.24" r="42.24"/>
      <path class="cls-3" d="M64.26,37.64l-.16-.17c-.88-.93-1.14-2.14-.56-2.68L66,32.48a2.26,2.26,0,0,1,3.19.17l.18.17a2.29,2.29,0,0,1,0,3.22l-2.44,2.3C66.33,38.89,65.15,38.57,64.26,37.64Z"/><path class="cls-3" d="M43.83,71.73l3.06-3.06c8.32.61,11.43-5.11,12.26-6.13"/><path class="cls-3" d="M64.9,56.76l-.17-.09c-.89-.77-1.21-1.85-.73-2.4l2-2.36a2,2,0,0,1,2.88-.24l.07.06.17.15a2.11,2.11,0,0,1,.26,2.95l-2,2.35C66.9,57.69,65.78,57.52,64.9,56.76Z"/><path class="cls-3" d="M44.85,64.58a15.83,15.83,0,0,0-2-14.55,28.93,28.93,0,0,0,1.47-7.31A6.3,6.3,0,0,0,43,38.48a1.77,1.77,0,0,0-2.49-.36,1.74,1.74,0,0,0-.57.74c-1.68,5.34-2,6.8-3.07,9.47-1.16,3-.5,7.22-1,8.45-.11.24-2.3,3.72-2.3,3.72"/><path class="cls-3" d="M64.92,50.34l-.18-.15c-.9-.77-1.23-1.88-.74-2.44l2-2.4a2.13,2.13,0,0,1,3-.17l.17.14a2.13,2.13,0,0,1,.27,3l-2,2.39C67,51.29,65.81,51.11,64.92,50.34Z"/><path class="cls-3" d="M64.92,44.09l-.18-.16c-.9-.77-1.23-1.87-.74-2.44l2-2.4a2.13,2.13,0,0,1,3-.17l.17.14a2.13,2.13,0,0,1,.27,3l-2,2.39C67,45,65.81,44.85,64.92,44.09Z"/><line class="cls-3" x1="52" y1="59.48" x2="55.06" y2="59.48"/><path class="cls-3" d="M65.27,32.92v-5.1a3.07,3.07,0,0,0-3.06-3.07H44.85a3.08,3.08,0,0,0-3.07,3.07V38"/><path class="cls-3" d="M44.85,62.54H62.21a3.06,3.06,0,0,0,3.06-3.06h0v-2"/><polyline class="cls-3" points="44.85 71.73 31.57 58.45 26.46 63.56 34.63 71.73"/><line class="cls-3" x1="31.57" y1="63.56" x2="32.59" y2="64.58"/><line class="cls-3" x1="45.87" y1="56.41" x2="64.25" y2="56.41"/><line class="cls-3" x1="41.78" y1="29.86" x2="65.27" y2="29.86"/><polyline class="cls-3" points="46.89 45.18 54.04 38.03 61.19 45.18"/><polyline class="cls-3" points="58.12 42.11 58.12 49.26 49.95 49.26 49.95 38.03"/><line class="cls-3" x1="54.04" y1="46.2" x2="54.04" y2="49.26"/></svg>
  </div>
  <div class="countdown" data-no="2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-2" cx="48.24" cy="48.24" r="42.5"/>
      <polyline class="cls-3" points="49.68 65.51 61.19 65.51 61.19 30.98 49.68 30.98"/><polygon class="cls-3" points="35.29 65.51 48.72 70.3 49.68 70.3 49.68 26.18 48.72 26.18 35.29 30.98 35.29 65.51"/><line class="cls-3" x1="45.84" y1="45.36" x2="45.84" y2="49.2"/></svg>
  </div>
  <div class="countdown" data-no="3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-2" cx="48.24" cy="48.24" r="42.5"/>
      <line class="cls-3" x1="24.86" y1="46.78" x2="33.63" y2="46.78"/><line class="cls-3" x1="28" y1="58.47" x2="35.59" y2="54.09"/><line class="cls-3" x1="36.55" y1="67.02" x2="40.94" y2="59.43"/><line class="cls-3" x1="48.24" y1="70.16" x2="48.24" y2="61.39"/><line class="cls-3" x1="59.93" y1="67.02" x2="55.55" y2="59.43"/><line class="cls-3" x1="68.48" y1="58.47" x2="60.89" y2="54.09"/><line class="cls-3" x1="71.62" y1="46.78" x2="62.85" y2="46.78"/><line class="cls-3" x1="68.48" y1="35.09" x2="60.89" y2="39.48"/><line class="cls-3" x1="28" y1="35.09" x2="35.59" y2="39.48"/><path class="cls-3" d="M48.24,56.52a9.59,9.59,0,0,1-9.74-9.44v-.3A12.62,12.62,0,0,1,41.29,39c1.11-1.37,2.08-2.13,2.08-3.9v-2"/><path class="cls-3" d="M48.24,56.52A9.59,9.59,0,0,0,58,47.08v-.3A12.55,12.55,0,0,0,55.2,39c-1.11-1.37-2.09-2.13-2.09-3.9v-2"/><polyline class="cls-3" points="45.32 33.14 42.4 33.14 42.4 26.32 54.09 26.32 54.09 33.14 48.24 33.14"/></svg>
  </div>
  <div class="countdown" data-no="4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-2" cx="48.24" cy="48.24" r="42.5"/>
      <path class="cls-3" d="M37.57,61.63A8.38,8.38,0,1,0,49.82,56.7V28.34a4.19,4.19,0,1,0-8.38,0V56.7A9.1,9.1,0,0,0,39.76,58"/><line class="cls-3" x1="54.01" y1="29.39" x2="59.24" y2="29.39"/><line class="cls-3" x1="54.01" y1="34.62" x2="59.24" y2="34.62"/><line class="cls-3" x1="54.01" y1="39.86" x2="59.24" y2="39.86"/><line class="cls-3" x1="54.01" y1="45.1" x2="59.24" y2="45.1"/><line class="cls-3" x1="54.01" y1="50.33" x2="59.24" y2="50.33"/><line class="cls-3" x1="45.63" y1="38.81" x2="45.63" y2="60.81"/><path class="cls-3" d="M44.32,61.07a3.25,3.25,0,0,1,1.31-.29,3.15,3.15,0,1,1-3.15,3.15"/></svg>
  </div>
  <div class="countdown" data-no="5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-2" cx="48.24" cy="48.24" r="42.5"/>
      <rect class="cls-3" x="33.39" y="46.26" width="29.71" height="22.78" rx="1.98"/><path class="cls-3" d="M38.34,46.26V37.35a9.9,9.9,0,0,1,9.9-9.9h0a9.9,9.9,0,0,1,9.9,9.9v8.91"/><path class="cls-3" d="M47.29,51.32a4,4,0,0,0-1,7.27v3.52a2,2,0,0,0,2,2h0a2,2,0,0,0,2-2h0V58.59a4,4,0,0,0-3-7.27Z"/></svg>
  </div>
  <div class="countdown" data-no="6">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.48 96.48"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#462e8d;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs>
      <circle class="cls-2" cx="48.24" cy="48.24" r="42.5"/>
      <path class="cls-3" d="M42.43,67.7a11.9,11.9,0,0,1-4.11-2.08,10.72,10.72,0,0,1-4.1-8.81c0-4.75,2.83-7.6,5.57-10.35,1.92-1.92,3.74-3.74,4.41-6.1a14.49,14.49,0,0,0-1.49-10.63.62.62,0,0,1,.2-.85.58.58,0,0,1,.51-.06A16.52,16.52,0,0,1,53.32,39a8.77,8.77,0,0,1-1.26,8.34c-.94,1.47-1.51,2.36-.51,3.9a2.15,2.15,0,0,0,2.82.56c1.64-.71,3-2.7,2.3-5.57a.61.61,0,0,1,.45-.74.63.63,0,0,1,.61.19,22.05,22.05,0,0,1,2.5,3.83,16.14,16.14,0,0,1,2,8.92c-.38,3.55-2.32,6.65-5.76,9.2"/><path class="cls-3" d="M46.29,67.59c-.09-.06-2.18-1.62-2.22-3.66A3.58,3.58,0,0,1,45.63,61c1.69-1.36,1.89-2.75.71-4.82a.63.63,0,0,1,.23-.84.67.67,0,0,1,.42-.07,9,9,0,0,1,6.62,5.57c.52,1.59.61,4-1.91,6.67"/></svg>
  </div>
</div>

script.js

var countcircles = {
  count:1,
  total:1,
  interval:6000,
  clock:null,
  items:null,
  init:function(){
    console.log("INIT!");
    var thisobj = this;
    this.count = 0;  
    this.items = $(".countdown");
    this.total = $(".countdown").length;
    this.nextCircle();
    this.clock = setInterval(function () {
      thisobj.nextCircle();
    }, this.interval);
  },
  nextCircle:function(){
    this.count++;
    if(this.count > this.total){
      this.count = 1;
    }
    console.log(this.count);
    this.singleCircle(this.count);
  },
  singleCircle:function(no){
    $(".countdown").removeClass("active");
    $(".countdown[data-no="+this.count+"]").addClass("active");
  },
  clickCircle:function(no){
    clearInterval(this.clock);
    $(".countdown").removeClass("active").removeClass("active-single");
    $(".countdown[data-no="+no+"]").addClass("active-single");
  }
};



$(document)
.ready(function () {
  console.log("PRE INIT!");
  countcircles.init();
 })
.on("click", ".countdown", function(){
  var target = $(this).data("no");
  countcircles.clickCircle(target);
})
;

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.css

body {
  height: 100%;
  width: 100%;
  background-color: #333;
}

.countdown {
  display: inline-block;
  margin: auto;
  margin: 0 20px 0 0;
  height: 72px;
  width: 72px;
  text-align: center;
  cursor: pointer;
}

.countdown svg {
  width: 72px;
  height: 72px;
  stroke: #462e8d;
  stroke-width: 1.5px;
  fill: none;
}

.countdown.active svg .cls-3 {
  stroke: #fff;
}

.countdown svg .cls-1, .countdown svg .cls-2, , .countdown svg .cls-3 {
  transition: fill 1s ease-in-out;
}

.countdown svg circle {
  stroke-dasharray: 266px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 6px;
  stroke: transparent;
  fill: #fff;
  transition: all .4s ease-in-out;
}

.countdown.active svg .cls-3 {
  stroke: #fff;
}

.countdown.active svg .cls-1, .countdown.active svg .cls-2 {
  fill: #462e8d;
}

.countdown.active-single svg .cls-3 {
  stroke: #fff;
}
*
.countdown.active-single svg .cls-1, .countdown.active-single svg .cls-2 {
  fill: #462e8d;
}



.countdown.active svg circle {
  animation: countdown 6s linear infinite forwards;
  animation-iteration-count:1;
  stroke: #fff;
}

.countdown.active-single svg circle {
  animation: countdown 0.4s linear infinite forwards;
  animation-iteration-count:1;
  stroke: #fff;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 266px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}