Circular Progress Bar And Countdown Timer With jQuery - circlebars

The jQuery Circle Bars plugin makes it easier to draw animated, customizable, circular progress bars and/or countdown timers using pure CSS/CSS3.

How to use it:

1. Load jQuery library and the jQuery Circle Bars plugin's core JavaScript and CSS files in the html file.

<link rel="stylesheet" href="assets/circle.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="assets/circle.js"></script>

2. Load the theme CSS files of your choice in the html file.

<link rel="stylesheet" href="skins/yellowcircle.css">
<link rel="stylesheet" href="skins/purplecircle.css">
<link rel="stylesheet" href="skins/firecircle.css">
<link rel="stylesheet" href="skins/whitecircle.css">
<link rel="stylesheet" href="skins/simplecircle.css">

3. Create a basic progress indicator/countdown timer as these:

<div id="myInstance">
  <div class="loader-bg">
    <div class="text">00:00:00</div>
  </div>
</div>

new Circlebar({
    element : "#myInstance"
});

// or

$(".myInstance").Circlebar()

4. Config the plugin with the following options.

Circlebar({

  // starting time
  startValue: 0,

  // max time
  maxValue: 60,

  // in milliseconds
  counter: 1000,

  // should the circles styling alters according to progress level
  triggerPercentage: false,

  // timer, progress or manual
  type: "timer",

  // the width of the dial
  dialWidth: 5,

  // font size
  fontSize: "20px",

  // font color
  fontColor: "rgb(135, 206, 235)",

  // skin name
  skin: "",

  // the size of the circle
  size: "150px"
  
});

5. You can also initialize & config the plugin via data attributes like so:

<div class="circlebar" 
     data-circle-startTime=0 
     data-circle-maxValue="90" 
     data-circle-dialWidth=10 
     data-circle-size="100px" 
     data-circle-type="progress">
  <div class="loader-bg">
      <div class="text">00:00:00</div>
  </div>
</div>

---

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