Daily UI #014: Countdown Timer

daily-ui-014-countdown-timer.markdown

Daily UI #014: Countdown Timer

https://dailyui.co/ #014

A Pen by Fabio Ottaviani on CodePen.

License.

index.html

<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

Use it for your next new year countdown

-->

<div id="wrap">
  <div class="c"></div>
  <div class="o"></div>
  <div class="u"></div>
  <div class="n"></div>
  <div class="t"></div>
</div>

<svg>
  <defs>
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="18" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -10" result="filter" />
      <feComposite in="SourceGraphic" in2="filter" operator="atop" />
    </filter>
  </defs>
</svg>

script.js

var i = 9;
$wrap = $('#wrap');
function countdown(){
  if (i < 0) {
    i = 9;
    setTimeout(function(){
      countdown();
    }, 2000);
    return false;
  }
  $wrap.removeAttr('class');
  setTimeout(function(){
    $wrap.addClass('wrap-' + i);
    setTimeout(function(){
      i--;
      countdown();
    }, 1000);
  }, 600);
}
countdown();

scripts

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

style.scss

$radius: 50px;

body { 
  background: linear-gradient(90deg, #53a0fd, #01c2f3);
}

#wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  filter: url('#filter');
}

.c,
.o,
.u,
.n,
.t { 
  width: $radius;
  height: $radius;
  position: absolute;
  top: calc(50% - #{$radius/2});
  left: calc(50% - #{$radius/2});
  background: #fff;
  border-radius: 20px;
  content: '';
  transform: rotate(360deg);
  // transition: all .50s cubic-bezier(0.700, -0.220, 0.000, 1.475);
  transition: all .50s cubic-bezier(0.950, 0.010, 0.000, 1.000);
  box-shadow: 0 2px 10px rgba(255, 255, 255, .5);
}

.c {
  transition-delay: 0.05s;
}
.o {
  transition-delay: 0.1s;
}
.u {
  transition-delay: 0.15s;
}
.n {
  transition-delay: 0.2s;
}
.t {
  transition-delay: 0.25s;
}


/*--------------------
Nine
--------------------*/
.wrap-9 {

  .c {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
  .o {
    width: 60px;
    height: 240px;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
  .u {
    width: 150px;
    height: 60px;
    left: 120px;
    top: 270px;
    transform: rotate(180deg);
  }
  .n {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
  }
  .t {
    width: 60px;
    height: 120px;
    left: 60px;
    top: 60px;
    transform: rotate(180deg);
  }
}


/*--------------------
Eight
--------------------*/
.wrap-8 {
  .c {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
    transform: rotate(180deg);
  }
  .o {
    width: 60px;
    height: 240px;
    left: 60px;
    top: 60px;
  }
  .u {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 270px;
    transform: rotate(180deg);
  }
  .n {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
  .t {
    width: 60px;
    height: 240px;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
}


/*--------------------
Seven
--------------------*/
.wrap-7 {
  .c {
    width: 140px;
    height: 60px;
    left: 190px;
    top: 70px;
    transform: rotate(-65deg); 
  }
  .o {
    width: 190px;
    height: 60px;
    left: 100px;
    top: 210px;
    transform: rotate(-65deg);
  }
  .u {
    width: 0;
    height: 0;
    left: 90px;
    top: 270px;
  }
  .n {
    width: 0;
    height: 0;
    left: 150px;
    top: 150px;
  }
  .t {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;     
  }
}


/*--------------------
Six
--------------------*/
.wrap-6 {
  .c {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
    transform: rotate(180deg);
  }
  .o {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 270px;
    transform: rotate(180deg);
  }
  .u {
    width: 60px;
    height: 240px;
    left: 60px;
    top: 60px;
  }
  .n {
    width: 60px;
    height: 120px;
    left: 240px;
    top: 180px;
    transform: rotate(180deg);
  }
  .t {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
}


/*--------------------
Five
--------------------*/
.wrap-5 {
  .c {
    width: 210px;
    height: 60px;
    left: 60px;
    top: 30px;
    transform: rotate(180deg);
  }
  .o {
    width: 210px;
    height: 60px;
    left: 60px;
    top: 270px;
    transform: rotate(180deg);
  }
  .u {
    width: 60px;
    height: 120px;
    left: 240px;
    top: 180px;
    transform: rotate(180deg);
  }
  .n {
    width: 60px;
    height: 140px;
    left: 60px;
    top: 60px;
  }
  .t {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
  }
}


/*--------------------
Four
--------------------*/
.wrap-4 {
  .c {
    width: 60px;
    height: 303px;
    left: 210px;
    top: 30px;
    transform: rotate(180deg);
  }
  .o {
    width: 60px;
    height: 60px;
    left: 244px;
    top: 211px;
    transform: rotate(180deg);
  }
  .u {
    width: 60px;
    height: 81px;
    left: 60px;
    top: 180px;
    transform: rotate(180deg);
  }
  .n {
    width: 60px;
    height: 208px;
    left: 110px;
    top: 9px;
    transform: rotate(45deg);
  }
  .t {
    width: 210px;
    height: 60px;
    left: 57px;
    top: 210px;
  }
}


/*--------------------
Three
--------------------*/
.wrap-3 {
  .c {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
    transform: rotate(180deg);
  }
  .o {
    width: 60px;
    height: 110px;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
  .u {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 270px;
    transform: rotate(180deg);
  }
  .n {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
  .t {
    width: 60px;
    height: 110px;
    left: 240px;
    top: 190px;
    transform: rotate(-180deg);
  }
}


/*--------------------
Two
--------------------*/
.wrap-2 {

  .c {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
  .o {
    width: 60px;
    height: 130px;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
  .u {
    width: 210px;
    height: 60px;
    left: 90px;
    top: 270px;
    transform: rotate(180deg);
  }
  .n {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 150px;
  }
  .t {
    width: 60px;
    height: 160px;
    left: 60px;
    top: 170px;
    transform: rotate(180deg);
  }
}


/*--------------------
One
--------------------*/
.wrap-1 {

  .c {
    width: 160px;
    height: 60px;
    left: 101px;
    top: 57px;
    transform: rotate(-36deg);
  }
  .o {
    width: 0;
    height: 0;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
  .u {
    width: 0;
    height: 0;
    left: 90px;
    top: 270px;
  }
  .n {
    width: 60px;
    height: 140px;
    left: 193px;
    top: 50px;
    transform: rotate(180deg);
  }
  .t {
    width: 60px;
    height: 160px;
    left: 193px;
    top: 174px;
    transform: rotate(-180deg);
  }
}


/*--------------------
Zero
--------------------*/
.wrap-0 {
  .c {
    width: 0;
    height: 0;
    left: 90px;
    top: 150px;
    transform: rotate(180deg);
  }
  .o {
    width: 60px;
    height: 240px;
    left: 60px;
    top: 60px;
  }
  .u {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 270px;
    transform: rotate(180deg);
  }
  .n {
    width: 180px;
    height: 60px;
    left: 90px;
    top: 30px;
  }
  .t {
    width: 60px;
    height: 240px;
    left: 240px;
    top: 60px;
    transform: rotate(180deg);
  }
}