Awesome Circular JQuery Final Countdown Timer Plugin

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.

4.5/5.0
Last updated 09 September, 2022
By Admin

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.

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.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>

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.

<div class="countdown countdown-container container">
    <div class="clock row">
        <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-days" class="clock-canvas"></div>
 
                    <div class="text">
                        <p class="val">0</p>
                        <p class="type-days type-time">DAYS</p>
                    </div><!-- /.text -->
                </div><!-- /.inner -->
            </div><!-- /.wrap -->
        </div><!-- /.clock-item -->
        <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-hours" class="clock-canvas"></div> 
                    <div class="text">
                        <p class="val">0</p>
                        <p class="type-hours type-time">HOURS</p>
                    </div><!-- /.text -->
                </div><!-- /.inner -->
            </div><!-- /.wrap -->
        </div><!-- /.clock-item -->
        <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-minutes" class="clock-canvas"></div>
                    <div class="text">
                        <p class="val">0</p>
                        <p class="type-minutes type-time">MINUTES</p>
                    </div><!-- /.text -->
                </div><!-- /.inner -->
            </div><!-- /.wrap -->
        </div><!-- /.clock-item -->
        <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-seconds" class="clock-canvas"></div>
                    <div class="text">
                        <p class="val">0</p>
                        <p class="type-seconds type-time">SECONDS</p>
                    </div><!-- /.text -->
                </div><!-- /.inner -->
            </div><!-- /.wrap -->
        </div><!-- /.clock-item -->
    </div><!-- /.clock -->
</div><!-- /.countdown-wrapper -->

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

<script>
$(function() {   
 $('.countdown').final_countdown({
        'start': 1362139200,
        'end': 1388461320,
        'now': 1387461319        
    });
});
</script>

I hope it can help you. Download source code here.

Jquery Plugin

Countdown

Awesome Circular JQuery Final Countdown Timer Plugin

Integrating Awesome Circular jQuery Final Countdown Timer Plugin

Categories