Awesome Circular jQuery Final Countdown Timer Plugin

by

In this tutorial I am going to introduce Awesome Circular jQuery Final Countdown Timer Plugin. It is helpful to display countdown in days hours minutes and seconds. You can add these types of fancy countdown before launch of your new project as you have already seen this type of feature on many sites home page before their launch. This plugin is also helpful to display counter for taking subscription for limited period or launching any product on specific date. so that your user get notified by very fancy full screen countdown.
Circular-jQuery-Final-Countdown-Timer-Plugin

Integrating Awesome Circular jQuery Final Countdown Timer Plugin

Follow bellow steps to Integrating Awesome Circular jQuery Final Countdown Timer Plugin.

Libraries

Include following libraries on page jquery-final-countdown plugin dependent on kinetic.js, jquery core library.

CSS

Add following css for styling your final countdown page.

html, body {
    height: 100%;
}

html {
    background-image: url('../img/sample.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
}

body {
    background-color: rgba(44,62,80 , 0.6 );
    background-image: url('../img/pattern.png');
    background-position: center;
    background-repeat: repeat;
    font-family: 'Raleway', 'Arial', sans-serif;
}

.countdown-container {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);

}

.clock-item .inner {
    height: 0px;
    padding-bottom: 100%;
    position: relative; 
    width: 100%;
}

.clock-canvas {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
    height: 0px;
    padding-bottom: 100%;
}

.text {
    color: #fff;    
    font-size: 30px;
    font-weight: bold;  
    margin-top: -50px;
    position: absolute;
    top: 50%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    width: 100%;
}

.text .val {
    font-size: 50px;
}

.text .type-time {
    font-size: 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .clock-item {
        margin-bottom: 30px;        
    }
}

@media (max-width: 767px) {
    .clock-item {
        margin: 0px 30px 30px 30px;
    }
}


HTML

Creating days, hours, minutes and seconds html container where countdown will display.


    

        

            

                

                    


                    

                        
0

                        
DAYS

                    

                

            

        


        

            

                

                    


                    

                        
0

                        
HOURS

                    

                

            

        


        

            

                

                    


                    

                        
0

                        
MINUTES

                    

                

            

        


        

            

                

                    


                    

                        
0

                        
SECONDS

JS

Finally call final_countdown() function on page and pass required parameter on this function like start and end date to make your countdown actionable.

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.


Published by Rohit