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.

Fonts

League Gothic and it’s license information are included with the package.

More from User Interface » Coded Elements

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 »
    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

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

You can't just submit stuff to our site, but we'd love for you to consider being one of our design contractors, see http://medialoot.com/main/open-positions/ for more information.

See all