jQuery Circular Progress Bar with Text Counter

The “Circular-Progress-Bar” is a lite and clean plugin for jQuery. This jQuery plugin helps you to create a circular progress bar with text counter. The plugin comes with multiple options to highly customize its functionalities. You can set custom text, color, and maximum value. Similarly, you can also define the starting position where to start progress bar text counting.

Moreover, the plugin allows you to set custom width and height. So, you can build a fully custom circular progress bar with the help of this plugin.

[intro_ad]

Plugin Overview and Preview

Plugin: Circular-Progress-Bar
Author: Nebir
Category: Others
Published: January 11, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7 KB
Dependencies: jQuery 3.0 or Latest version and Bootstrap 4.1.3
Last Modified:
MIT
3,927
[ad_after_overview]

How to Create Circular Progress Bar with Text Counter

1. After downloading this project, load the jQuery and Bootstrap (optional) into your website.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Similarly, include plugin’s CSS and Js file in your website.

<!-- Circular-Progress-Bar CSS -->
<link rel="stylesheet" href="css/plugin.css">
<!-- Circular-Progress-Bar JS -->
<script src="js/plugin.js"></script>

3. Create HTML div element (with a unique id or class) in which radial progress bar will be rendered dynamically.

 <div class="container">
            <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                    <div class="my-progress-bar"></div>
                </div>
            </div>
        </div>

4. Finally, initialize the plugin in jQuery document ready function to active the progress bar.

$(document).ready(function(){
	    $(".my-progress-bar").circularProgress({
        line_width: 6,
        color: "#ccc",
        starting_position: 0, // 12.00 o' clock position, 25 stands for 3.00 o'clock (clock-wise)
        percent: 0, // percent starts from
        percentage: true,
        text: "More power behind every pixel"
    }).circularProgress('animate', 99, 5000);
});

Advance Configuration Options

The following are some advanced configuration options to create jQuery circular progress bar with text counter.

Option Default Type Description
percentage true Boolean Decide whether to show percentage.

Example:

$(".my-progress-bar").circularProgress({
	percentage : true,
}); 
text “” String Custom text for progress bar counter.

Example:

$(".my-progress-bar").circularProgress({
	text : "",
}); 
counter_clockwise false Boolean Define the progress bar animation clockwise or anti-clockwise. True for anticlockwise,

Example:

$(".my-progress-bar").circularProgress({
	counter_clockwise : false,
}); 
percent 100 Number This option is useful to set the maximum value for circular progress bar.

Example:

$(".my-progress-bar").circularProgress({
	percent : 100,
}); 
color “#000000” String Define the color for text. Pass the HTML color code value in this string option,’

Example:

$(".my-progress-bar").circularProgress({
	color : "#000000",
}); 
height “300px” String It defines the height for progress bar,

Example:

$(".my-progress-bar").circularProgress({
	height : "300px",
}); 
width “300px” String It defines the width for progress bar,

Example:

$(".my-progress-bar").circularProgress({
	width : "300px",
}); 
line_width 8 Number Set the line width,

Example:

$(".my-progress-bar").circularProgress({
	line_width : 8,
}); 
starting_position 25 Number Decide where to start progress bar counting animation.

Example:

$(".my-progress-bar").circularProgress({
	starting_position : 25,
}); 
[ad_after_artical]

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X