vue-progress-circle


Circle progress bar component for vue3. See versions 1.X for vue2 component.

Live demo here

Global use

- npm install in console
``
npm install --save vue-progress-circle
`
- import component in your code
`
import { ProgressCircle } from 'vue-progress-circle'
`
you may also import it globally in your app
`
import { createApp } from "vue";
import vueProgressCircle from "vue-progress-circle";
createApp(App).use(vueProgressCircle);
`
- Use components as described below

Components

$3

`

`
`
:completed-steps="cpCompletedSteps"
:circle-color="cpCircleColor"
:start-color="cpStartColor"
:stop-color="cpStopColor"
:circle-width="cpCircleWidth"
:animation-duration="cpAnimationDuration"
:inner-color="cpInnerColor"
:inner-display="cpInnerDisplay"
:percent-color="cpPercentColor"
:circle-origin="cpCircleOrigin"
:reverse-rotation="cpReverseRotation"
:after-mount-delay="cpAfterMountDelay"
:total-steps="cpTotalSteps">

Total steps: {{ cpTotalSteps }}

Completed steps: {{ cpCompletedSteps }}

`


| Prop | Type | Note |
|:---------------------|:----------|-------------------------------------------------------------------------------------------------------------------------------------------------:|
| completed-steps | number | REQUIRED: number of completed steps |
| total-steps | number | REQUIRED: number of total steps |
| diameter | number | (px) diameter of circle component (default 100) |
| circle-color | String | inner circle color (when no progress, default black) |
| start-color | String | leading color for progress bar (default red) |
| stop-color | String | trailing color for progress bar (default blue) |
| inner-color | String | Color inside the circle (default transparent) |
| circle-width | number | (px) circle width (default 10) |
| animation-duration | number | (ms) duration of animation when progress change (default 1000) |
| inner-display | String | Change inner circle filling. By default or 'slot', it will use provided slot (or nothing). 'Percent' will display progress percent rounded value |
| percent-color | String | Change color of progress percent if displayed (see inner-display, default inherit) |
| circle-origin | String | Change circle starting point. Accepted values are 'top', 'right', 'bottom', 'left' (default 'top') |
| reverse-rotation | Boolean | Change progress to clockwise rotation (default 'false') |
| after-mount-delay | number | (ms) duration to wait before displaying circle progress (default 0) |

By default, this component provide a slot where you can insert any html code
to be displayed inside the circle

You may use CSS variables for colors,
and potentially override it easily using a class on the component.
Declare component usage like
`
:completed-steps="5" :total-steps="10"
start-color="var(--my-color)"
stop-color="var(--my-color)">

:completed-steps="5" :total-steps="10"
start-color="var(--my-color)"
stop-color="var(--my-color)">

`
And then define CSS variables for each class
`
.sample1 {
--my-color: fuchsia;
}
.sample2 {
--my-color: green;
}
`
Each component will have it's own color!

Contribution

This library is managed with vue-CLI
- Fork the repository
- Run npm install
- You can run npm run serve, the script will start the mini demo application
- Do your stuff
- When you're done, run npm run build` command and commit your work for a pull request.