A simple and lightweight circular indicator plugin. Also works on Internet Explorer. It supports duration, color range, interpolation, formatting, percentage value and much more. Does work well with jQuery and AngularJS.
Through npm:
npm install @sudhanshu/radial-indicator
When updating the documentation, checkout the repository and run npm install and then npm start to run examples locally.
- Added the option to specify an easing function
- Added the option to specify an animation duration
animate(value, anmDuration)has now an optional second parameter to define a duration from current value to the target value. While thedurationproperty on the indicator is the duration from yourminValuetomaxValue. If you did not set those values default is 0-100.- Replaced
setIntervalwithrequestAnimationFrame - Fixed: Formatter not handling decimal places correctly
- Fixed: Animation issue when the
minValueis negative #11 - Fixed: Using decimal value in indicator #25
- Since
setInterval()was replaced withrequestAnimationFrame()there are most likely, but depending on your setup, more iterations than before. Causing a smoother animation. Before this release if no precision property was set, default was depending on the step after each iteration. This is no longer the case since we have smaller steps with more decimal places. If you do not specify precision on the indicator, default number of decimals is 0. If you want decimal places, you have to set theprecisionproperty. - When a
formatpattern is set, decimal places in the format will take precedence overprecisionproperty frameTimeandframeNumproperties on the indicator are now deprecated. Those fields are only used when nodurationproperty is set and will be removed in a future release.
- Added option to support rendering in the opposite direction.
- Added option to allow user interaction on mouse and touch events.
- Added
precisionoption to support float value.
- Fixed draw issue on iPad and Android devices and added
onAnimationCompletecallback.