Remaining Time Counter, CSS3 + jQuery

Published on: Apr 04 2012 by Anli

Remaining Time Counter, CSS3 + jQuery

A remaining time counter is very useful when you are designing a coming soon page. It displays the time remaining to a project launch or to a website opening. So, today’s free web design resource is a dark countdown timer. I designed this timer using CSS3 and the jQuery countdown plugin from Martin Angelov of tutorialzine.com. I think CSS3 offers a lot of graphic effects that, when combined with jQuery, can add a lot of functionality to a web page.


You can view a demo of this counter from the link below. It displays the days, hours, minutes and seconds remaining and it’s set to 20 days from now, but you can customize it as you like.

VIEW DEMO

You can use this time counter in personal and commercial projects, but you can’t sell or redistribute it directly. If you want to publish it somewhere, please refer to this page.

DOWNLOAD: Remaining Time Counter, CSS3 + jQuery (3533)

Don’t forget to follow me on Facebook and Twitter for other freebies. Enjoy!

6 Comments So Far

  1. alisheytoon says:

    Thank For You . Good

  2. julio says:

    do u know how can i set this countdown to a specific date. and each time i reset my page it keeps going to 20 hours again! how do i change that.

    • Anli says:

      You can set it in the “script.js” file like this:

      timestamp : new Date(2013,2,25)

      This is for 25 March 2013.

  3. Dan says:

    Hello there. Found this perfect counter and I just want to know how to hide the remaining days and seconds without showing 00(at days) … hope I’ve been clear enough. Thanks

  4. Harsh says:

    Need 3 time counter :/…can u make it?? tried but hard

  5. Sparky says:

    Fantastic!! Another counter that does not work in IE8… Just great 🙁

Sorry, the comment form is closed at this time.