percentage circle progress - Free Download Display Percentage/Progress Values As Gauges - Circle Progress

Free Download Display Percentage/Progress Values As Gauges – Circle Progress

By Posted on

This time I will share jQuery Plugin and tutorial about Display Percentage/Progress Values As Gauges – Circle Progress, hope it will help you in programming stack.

percentage circle progress - Free Download Display Percentage/Progress Values As Gauges - Circle Progress
File Size: 227 KB
Views Total: 3315
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another circle progress bar plugin to display any numeric values in a responsive, customizable, animated percentage/progress graphs: circles, ring charts, pie charts, etc.

More features:

  • Fully customizable via JavaScript and CSS.
  • Vector shaped based on SVG.
  • Rotate clockwise or anti-clockwise.
  • Fancy fill animations with easing functions.
  • 6 display modes for values.
  • Also can be used as a Vanilla JavaScript plugin.

How to use it:

1. Load the Circle Progress plugin’s script in the document. To use the Circle Progress as a jQuery plugin, make sure to load the jquery.circle-progress.min.js after the latest jQuery JavaScript library.

view source
1 <!-- Vanilla JavaScript -->
2 <script src="dist/circle-progress.min.js"></script>
3  
4 <!-- jQuery -->
5 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
6 <script src="dist/jquery.circle-progress.min.js"></script>

2. Create an empty container to hold the percentage/progess circle.

view source
1 <div class="progress"></div>

3. Initialize the plugin and specify the current/max values as follows:

view source
01 // Vanilla JavaScript
02 new CircleProgress('.progress', {
03   max: 100,
04   value: 50
05 });
06  
07 // jQuery
08 $('.progress').circleProgress({
09   max: 100,
10   value: 50
11 });

4. Customize the styles of the the percentage/progess circle with the following CSS classes.

view source
01 .circle-progress-svg {
02   /*
03     width: 200px;
04     height: auto;
05     ...
06    */
07 }
08  
09 .circle-progress-circle {
10   /*
11     stroke-width: 6px;
12     stroke: hsl(39, 100%, 85%);
13     ...
14    */
15 }
16  
17 .circle-progress-value {
18   /*
19     stroke-width: 6px;
20     stroke: hsl(39, 100%, 50%);
21     ...
22   */
23 }
24  
25 .circle-progress-text {
26   /*
27     fill: hsl(39, 100%, 50%);
28     ...
29   */
30 }
31  
32 .circle-progress-text-value {
33   /*
34     fill: red;
35     ...
36   */
37 }
38  
39 .circle-progress-text-max {
40   /*
41     fill: red;
42     ...
43   */
44 }

5. Set the text representation of the values:

  • horizontal (default)
  • vertical
  • percent
  • value
  • valueOnCircle
  • none
view source
1 new CircleProgress('.progress', {
2     textFormat: 'horizontal'
3 });

6. Customize the fill animation.

view source
1 new CircleProgress('.progress', {
2  
3     // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, or none
4     animation: 'easeInOutCubic',
5  
6     // duration in milliseconds
7     animationDuration: 600
8      
9 });

7. Set the starting angle in degrees. Default: 0.

view source
1 new CircleProgress('.progress', {
2     startAngle: 45
3 });

8. More configuration options with default values.

view source
01 new CircleProgress('.progress', {
02      
03     // min value
04     min: 0,
05  
06     // false = anti-clockwise
07     clockwise: true,
08  
09     // whether the value should be constrained between min and max
10     constrain: true,
11  
12     // indeterminate text
13     indeterminateText, '?'
14      
15 });

Changelog:

v0.2.0 (2020-08-23)

  • Add UMD support

v0.1.2 (2020-05-02)

  • Replace SVG innerHTML polyfill

v0.1.1 (2020-04-27)

  • Extend animation capabilities

v0.1.0 (2019-10-05)

  • Add CSS class to the SVG element

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

Related posts: