ProgressCircle Test

Project setup and launch

npm install

// wait for it

npm run serve

ProgressCircle Component

source file is ->HERE<-

Prop	Type	Default	Required	Description
label	String	''	false	Optional label under the progress numerical values.
size	Enum ( default, compact)	default	false	Size of the progress circle.
currentValue	Number		true	Current value of the progress.
maxValue	Number		true	Maximum value of the progress.

Examples

<ProgressCircle :current-value="0" :max-value="100" />

<ProgressCircle :current-value="39" :max-value="100" />

<ProgressCircle :current-value="8" :max-value="15" :label="'Label'" />

<ProgressCircle :size="'compact'" :current-value="0" :max-value="100" />

<ProgressCircle :size="'compact'" :current-value="42" :max-value="100" />

<ProgressCircle :label="'Label'" :size="'compact'" :current-value="42" :max-value="73" />

Animated transition when compact size

What is missing

• font family (wasn't defined and couldn't find it here https://www.whatfontis.com/)
• default size progress isn't animated when currentValue is changed