Skip to content

Instantly share code, notes, and snippets.

@hateum

hateum/Daily UI #014: Countdown Timer.markdown

Last active March 30, 2016 15:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hateum/ccc0d771cd05128ece39 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hateum/ccc0d771cd05128ece39 to your computer and use it in GitHub Desktop.
Download ZIP
Daily UI #014: Countdown Timer
Raw
index.html
<!--
Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: http://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>
Raw
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();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
$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);
}
}
Raw
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment