Display Percentage/Progress Values As Gauges - Circle Progress
File Size: | 295 KB |
---|---|
Views Total: | 4563 |
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 (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.