progress-ring-component-react

progress-ring-component-react

This is a React version of progress-ring-component, an animated web component showing progress in percentage. It internally uses easing-animation-frames library to create CPU-friendly easing animations and compiled with Stencil and its React wrapper library.

<ProgressRing percentage={30} />
<ProgressRing percentage={60} round-linecap={true} />
<ProgressRing percentage={90} disable-digits={true}>
  <p class="completed-count">9/10<br />Complete</p>
</ProgressRing>

There is only one mandatory property, percentage, which declares the ending percentage in animation. You can also use radius prop to change the size of the ring, and storkeWidth to change the thickness of the ring. The full list of properties can be found below.

This component works reactively in a unidirectional fashion. When the percentage changes, it stops the current animation and resumes it with new percentage. There is pre-defined color scheme (red (< 25%) -> yellow (< 50%) -> blue (< 75%) -> green (>= 75%)).

Properties

Property	Type	Default	Description
percentage	number	0	Percentage value (mandatory)
radius	number	80	Radius of the ring
stroke-width	number	10	Thickness of the ring
round-linecap	boolean	false	Addes rounded linecap to the ring
duration	number	4000	Animation duration in miliseconds
easing-type	string	"quartInOut"	Easing animation function name
int-size	number	30	Font size of integer
decimal-size	number	intSize * 0.7	Font size of decimals
disable-digits	boolean	false	Hides digits
disable-decimals	boolean	false	Hides decimal places
colors	Map	[[0,"#ff4f40"],[25, "#ffcd40"],[50, "#66a0ff"],[75, "#30bf7a"]]	Color steps with percentage and color code
invert-colors	boolean	false	Inverts the color scheme
event-id	string	undefined	Event Id to be used for animation callbacks

Easing Types

backInOut, backIn, backOut, bounceInOut, bounceIn, bounceOut, circInOut, circIn, circOut, cubicInOut, cubicIn, cubicOut, elasticInOut, elasticIn, elasticOut, expoInOut, expoIn, expoOut, linear, quadInOut, quadIn, quadOut, quartInOut, quartIn, quartOut, quintInOut, quintIn, quintOut, sineInOut, sineIn, sineOut

Advanced usage with animation events

By passing even-id as a prop, you can listen to events emitted by with the animation, and register callback functions for them.

Event Name	Payload	Description
prcProgress	{ id: string, progress: number, percentage: number }	Event to be emitted on every progress change (from 0 to 1)
prcStart	{ id: string }	Event to be emitted when the animation starts
prcComplete	{ id: string }	Event to be emitted when the animation is completed
prcStop	{ id: string }	Event to be emitted when the animation is stopped
prcResume	{ id: string }	Event to be emitted when the animation is resumed
prcRestart	{ id: string }	Event to be emitted when the animation is restarted