jQuery Progress Bar Countdown Timer

Category: Date & Time | January 24, 2021
jQuery Progress Bar Countdown Timer
Author: Vyacheslav
Official Page: Go to Website
Last Update:January 24, 2021
License:MIT

The “CircleBar” is a lightweight jQuery plugin that helps you to develop a progress bar with a countdown timer. You just need to create a container in HTML where the plugin renders a circular progress bar with a timer. The timer counting can be displayed in both numbers and percentages.

The plugin allows you to set the custom size for the circle. Similarly, you can also set the custom values for the circular progress style, like background, color, etc.

Furthermore, you have full control over the plugin configuration. You can set the maximum counting value, custom skin, value for circle thickness, font color and size, etc.

How to Create Progress Bar with Countdown Timer

In the very first step load the jQuery, "CircleBar" CSS and JavaScript file into the head tag of your HTML document.

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<!-- CircleBar JS -->
<script src="js/circlebar.js"></script>
<!-- CircleBar CSS -->
<link rel="stylesheet" href="css/circlebar.css">

After that, create a div element with a class name "circles-container" and place another div tag inside it with a unique ID. Define the circle dail width using HTML5 data attribute data-circle-dialWidth and skin color using data-circle-skin attribute.

Likewise, create another child div element with a class name “loader-bg” that defines the background of the circle. Place the time inside the loader-bg element and wrap it into a div with a class name "text". So, a basic HTML structure for the circular progress bar with a timer is as follows:

<div class="circles-container">
   <div id="circle-1" data-circle-dialWidth=10 data-circle-skin="yellow">
    <div class="loader-bg">
     <div class="text">00:00:00</div>
    </div>
  </div>
</div>

The complete HTML structure (like shown on the demo page) with various progress bar variants is given below:

<div class="page">
   <div class="circles-container">
      <div id="circle-1" data-circle-dialWidth=10 data-circle-skin="yellow">
         <div class="loader-bg">
            <div class="text">00:00:00</div>
         </div>
      </div>
      <div class="circle-2" data-circle-maxValue="75" data-circle-counter=1000 data-circle-size="300px">
         <div class="loader-bg">
            <div class="text">0%</div>
         </div>
      </div>
      <div class="circlebar" data-circle-startTime=0 data-circle-dialWidth=20 data-circle-size="250px">
         <div class="loader-bg">
            <div class="text">00:00:00</div>
         </div>
      </div>
      <div id="circle-3" data-circle-dialWidth=10 data-circle-skin="purple">
         <div class="loader-bg">
            <div class="text">00:00:00</div>
         </div>
      </div>
      <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>
   </div>
</div>

Finally, activate the plugin in the jQuery document ready function to render the countdown timer progress bar . You can also configure some basic options (like maximum counting value and font size etc) as follows:

$(document).ready(function() {
   $("#circle-1").Circlebar({
	maxValue: 30,
	fontSize: "14px",
	triggerPercentage: true
   });
});

The following is the complete activation script for all other variants of the progress bar:

    <script>
    $(document).ready(function() {
	$("#circle-1").Circlebar({
		maxValue: 30,
		fontSize: "14px",
		triggerPercentage: true
	});
	var t2 = new Circlebar({
		element: ".circle-2",
		maxValue: 152,
		dialWidth: 40,
		fontColor: "#777",
		fontSize: "30px",
		skin: "fire",
		type: "progress"
	});

	new Circlebar({
		element: "#circle-3",
		maxValue: 230,
		size: "240px",
		fontSize: "30px",
		type: "progress"
	});
	var prefs = {
		element: ".circlebar"
	};
	$('.circlebar').each(function() {
		prefs.element = $(this);
		new Circlebar(prefs);
	});
});

Advanced Configuration Options

The following are the available configuration options to customize the “CircleBar” plugin.

OptionDefaultTypeDescription
maxValue60NumberThe maximum value of the circular progress bar.

Example:

$("#circle-1").Circlebar({
	maxValue : 60,
});
dialWidth5NumberThis option defines the thickness of the circle line in px.

Example:

$("#circle-1").Circlebar({
	dialWidth : 5,
});
size“150px”StringSpecify the size of the circle in px.

Example:

$("#circle-1").Circlebar({
	size : "150px",
});
fontSize“20px”StringIt defines the font size of the circle/counting numbers.

Example:

$("#circle-1").Circlebar({
	fontSize : "20px",
});
fontColor“rgb(135, 206, 235)”StringThe color of the fonts. You can set the any valid HTML color value in this string.

Example:

$("#circle-1").Circlebar({
	fontColor : "rgb(135, 206, 235)",
});
triggerPercentagefalseBooleanDecide whether to show percentages or not. You can set the true value if you wanted to display counting in form of percentages.

Example:

$("#circle-1").Circlebar({
	triggerPercentage : false,
});

That’s all! hopefully, this jQuery plugin fulfills your needs to develop a progress bar with a timer. If you have any questions or need further help, let us know by comment below.

You May Also Like

2 thoughts on “jQuery Progress Bar Countdown Timer”

  1. Great job dude, it’s really neat 🙂

    A few minor questions

    I get different results pressing the Download button on your sites.
    One time I got a zip with only RSS missing classes like page, spinner-holder-one etc and did not work with any examples from the site,
    second time I got a bigger zip with js, rss and better examples.

    – First one is called purecss-circular-progress-bar-master.zip
    – The other one is called master.zip

    Also; several minor inconveniences in your code.
    – ie. The progress type has no adjustable values; they are all hard coded.
    * I can’t change the times variable or factor variable.
    – Only the Timer type reacts to changes from attribs or prefs.

    Some explanation on how to make the percentage progress go slower or faster, would have been nice.
    Your advanced configuration section doesn’t even mention half the configuration variables available in there.
    You did a great job here – a little more explanation goes a long way 🙂

    Alas; I dived into the code and did it myself.
    No hazzle if you are experienced with js and jquery.

    Reply
    • Hi Christian!
      Thanks for your feedback. First of all, there is no downloading problem with the site. Each tutorial has “master.zip” downloadable file containing the tutorial/demo code.

      According to your question, you can make the percentage slow or faster by changing the timeout value.
      Basically, the plugin don’t have any option to control the progress speed. Anyhow, you can edit the plugin JS file and update the decelerating timeout in milliseconds. So, find the following line and write your custom value instead of 100.

      setDeceleratingTimeout(0.1, 100);
      
      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.