ngPercentDisplay Directive

Constant value
Use a constant value to set the directive. Uses the default colors

<percent-display percent="30" side="60" colors=""></percent-display>

Dynamically change value
Click the button to see the value of the percentage change.

<percent-display percent="value" side="60" colors="#CCE0CC #006400"></percent-display>

Use your own colors
By setting the attribute colors with html colors separated by spaces. The first is the circle, the second the percentage and the third the inner background

<percent-display percent="value" side="60" colors="#F8D0D8 #DC143C"></percent-display>

Set the desired size
The side attribute represents the size in pixels of a square side in which the graph will be drawn.

<percent-display percent="62" side="120" colors="#C2C2FF #3333FF"></percent-display>