Life's easy with Medialoot.

Unlimited access for only $14/mo.

jQuery Flip Clock Countdown Timer

jQuery Flip Clock Countdown Timer : Image 1
jQuery Flip Clock Countdown Timer : Image 2

This sleek flip clock timer makes for an elegant way to countdown to events. Perfect for new website launches. Not only do you get the vector Photoshop .psd source files, we have also included the fully working jQuery files so its ready to use straight away. Just enter the date you want to countdown too (unix stamp) and choose to start counting from days, hours, minutes or seconds. It supports upto 3 digits per section.

Live Preview

Click here to see the live preview

More from User Interface » Coded Elements

Oct 13th 2081 1
Free
Oct 1st 159 3
$6

Comments

  • Reply »
    Fabiola Singh

    Fabiola Singh

    very nice! just what i need!!

    Mar 16, 2012 at 12:01 pm
  • Reply »
    HoodedMan

    HoodedMan

    very sleek design…. thumbs up!

    Mar 16, 2012 at 12:59 pm
  • Reply »
    Michael Fillier

    Michael Fillier

    Not very happy about this one. The code seems to work fine, but the image is misleading. I thought the numbers would be cut in the middle, just like the preview (which I thought was impressive) but they are not. Here is a screenshot: http://screencast.com/t/oU6yYNpqC

    Apr 5, 2012 at 2:34 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi Michael, sorry for the extremely late reply but thank you for your comment and also providing a fix for other downloaders. We have made some small improvements to the countdown today and now include a live preview so that everybody knows exactly what they will be getting.

      Apr 29, 2014 at 6:48 am
  • Reply »
    Michael Fillier

    Michael Fillier

    UPDATE: I fixed the numbers not being cut on my own. This has not been tested thoroughly though.

    <!—===== HTML =====—!>

    <ul>
      <li>
      <div class=“ml-countdown days top”>Days</div>
      <div class=“ml-countdown days bottom”>Days</div>
      </li>
      <li>
      <div class=“ml-countdown hours top”>Hours</div>
      <div class=“ml-countdown hours bottom”>Hours</div>
      </li>
      <li>
      <div class=“ml-countdown minutes top”>Minutes</div>
      <div class=“ml-countdown minutes bottom”>Minutes</div>
      </li>
      <li>
      <div class=“ml-countdown seconds top”>Seconds</div>
      <div class=“ml-countdown seconds bottom”>Seconds</div>
      </li>
    </ul>

    <!—===== CSS =====—!>
    .top {
    height: 68px;
    overflow: hidden;
    }
    .bottom {
    height: 50px;
    line-height: 4px;
    margin-top: 5px;
    overflow: hidden;
    }

    Apr 5, 2012 at 3:40 pm
  • Reply »
    Constanza

    Constanza

    Good Point, Michael. Thanks!

    Apr 25, 2012 at 12:55 pm
  • Reply »
    roberthein

    roberthein

    Dammit why did u just read them comments a sec too late..
    This is no way worth the money :-(

    If u need a proper flip-clock or countdown look somewhere else..

    /Rob

    Jun 13, 2012 at 10:37 am
  • Reply »
    Nihal ahmed

    Nihal ahmed

    nice one

    Aug 30, 2012 at 12:36 am
  • Reply »
    deepak.arasu@gmail.com

    [email protected]

    this is not working now…

    Apr 26, 2014 at 12:43 am
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi, thanks for your feedback. We have made some improvements to the code and should be working okay now, but please let us know if you are still having issues.

      Apr 29, 2014 at 6:44 am
  • Reply »
    NICK

    NICK

    looks great, but haven’t tried it.
    looking for slick look like this but with code that multiplies time in seconds and then displays number in dollars.

    Jul 4, 2014 at 6:32 pm

Leave a comment

Tag Cloud

Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all