Use jQuery to implement a beautiful circular progress bar countdown plug-in

Use jQuery to implement a beautiful circular progress bar countdown plug-in_jquery

WBOY

Release： 2016-05-16 15:37:28

Original

2416 people have browsed it

jQuery Final Countdown is a stylish circular progress bar style jQuery countdown plug-in. This countdown plug-in can display countdown seconds, minutes, hours and days. It uses a circular progress bar as a countdown animation, which is very fashionable and elegant.

Online preview Source code download

How to use

This countdown plugin relies on jQuery and KineticJS - an HTML5 Canvas library. Use is to introduce them.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="js/jquery.final-countdown.js"></script>

Copy after login

HTML structure

The HTML structure of this countdown plug-in uses the following HTML structure. In order to facilitate the layout, Bootstrap is used as the framework.

<div class="countdown countdown-container container">
 <div class="clock row">
  <div class="clock-item clock-days countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-days" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></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- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-hours" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></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- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-minutes" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></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- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-seconds" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-seconds type-time">SECONDS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
 </div><!-- /.clock -->
</div><!-- /.countdown-wrapper -->

Copy after login

The above code is very simple. It is very useful to use the jQuery Final Countdown plug-in to achieve a beautiful circular progress bar countdown. I hope this article will be helpful to everyone. Please continue to pay attention to this site. There are new ones every day. Content updated.