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

Leave a Comment

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