Display Percentage/Progress Values As Gauges - Circle Progress

Display Percentage/Progress Values As Gauges - Circle Progress
File Size: 207 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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 (horizontal)
  • vertical
  • percent
  • value
  • valueOnCircle
  • none
new CircleProgress('.progress', {
    textFormat: 'horizontal'
});

6. Customize the fill animation.

new CircleProgress('.progress', {

    // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr 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, '?'
    
});

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