Colorful Countdown Timer - jQuery C3Counter

A beautiful, animated, and customizable date countdown timer built with C3counter.js.

Ideal for creating an elegant Offer CountDown Timer on your eCommerce web app.

How to use it:

1. Include the jQuery library and C3counter.js on the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="C3counter.js"></script>

2. Create the HTML for the countdown timer.

<div class="offerHolder">
  <a href="offlink">
    <div class="special">
      <div id="counter">
        <div id="shading">&nbsp;</div>
      </div>
    </div>
  </a>
</div>

3. Apply the necessary styles to the countdown timers.

.special {
  position:relative;
  float:left;
  width:840px;
  height:247px;
  background-image: url(../images/special_offer_bg.png);
  background-position: 0px 74px;
  background-repeat: no-repeat;
  margin-bottom:46px;
  cursor:pointer;
}

#counter {
  position:absolute;
  top:135px;
  left:279px;
  z-index:4000;
}

.digit-separator {
  position: relative; float: left; width: 17px; height: 44px; overflow: hidden; background-image: url(../images/digit_separator.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.digit {
  background-image:url(../images/digits.png)
}

#shading {
  background-image: url(../images/sprites.png);
  background-position: 0px -396px;
  background-repeat: repeat-x;
  float: left;
  height: 44px;
  position: absolute;
  width: 291px; 
  z-index:4100;
  top:0;
  left:0;
}

4. Initialize the countdown timer and specify the date & time (in milliseconds) the offers will end.

C3Counter("counter", { 
  startTime :257800 
});

5. Full plugin options to customize the countdown timer.

C3Counter("counter", { 
  digitImages: 1,
  digitWidth: 30,
  digitHeight: 44,
  digitSlide : true,
  digitSlideTime : 200,
  digitImageHeight : 484,
  digitAnimationHeight : 44, 
  image: "digits.png", 
  updateInterval : 1000 
});

6. Execute a callback function when the countdown timer is finished.

C3Counter("counter", { 
  timerEnd: function(){
    // do something
  },
});

Changelog:

2018-06-15

• Doc & Demo updated

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.