Display Percentage/Progress Values As Gauges - Circle Progress

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.

See also:

• Best Circular/Radial Progress Bar JavaScript Plugins

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.

<!-- Vanilla JavaScript -->
<script src="dist/circle-progress.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery.circle-progress.min.js"></script>

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

<div class="progress"></div>

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

// Vanilla JavaScript
new CircleProgress('.progress', {
  max: 100,
  value: 50
});

// jQuery
$('.progress').circleProgress({
  max: 100,
  value: 50
});

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

.circle-progress-svg {
  /* 
    width: 200px; 
    height: auto;
    ...
   */
}

.circle-progress-circle {
  /* 
    stroke-width: 6px;
    stroke: hsl(39, 100%, 85%);
    ...
   */
}

.circle-progress-value {
  /* 
    stroke-width: 6px;
    stroke: hsl(39, 100%, 50%);
    ...
  */
}

.circle-progress-text {
  /* 
    fill: hsl(39, 100%, 50%);
    ...
  */
}

.circle-progress-text-value {
  /* 
    fill: red;
    ...
  */
}

.circle-progress-text-max {
  /* 
    fill: red;
    ...
  */
}

5. Set the text representation of the values:

• horizontal (default)
• vertical
• percent
• value
• valueOnCircle
• none

new CircleProgress('.progress', {
    textFormat: 'horizontal'
});

6. Customize the fill animation.

new CircleProgress('.progress', {

    // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, or none
    animation: 'easeInOutCubic',

    // duration in milliseconds
    animationDuration: 600
    
});

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

new CircleProgress('.progress', {
    startAngle: 45
});

8. More configuration options with default values.

new CircleProgress('.progress', {
    
    // min value
    min: 0,

    // false = anti-clockwise
    clockwise: true,

    // whether the value should be constrained between min and max
    constrain: true,

    // indeterminate text
    indeterminateText, '?'
    
});

Changelog:

v0.2.4 (2022-05-16)

• Fix text value for valueOnCircle and no animation

v0.2.3 (2022-03-13)

• Bugfix

v0.2.2 (2022-01-16)

• Support NPM.

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.