GitHub - Keiwen/vue-progress-circle: Circle progress bar component for vueJS (original) (raw)

vue-progress-circle

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

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

Progress circle

<progress-circle completed-steps="5" total-steps="10"></progress-circle>

<progress-circle :diameter="cpDiameter"
                 :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">
   <p>Total steps: {{ cpTotalSteps }}</p>
   <p>Completed steps: {{ cpCompletedSteps }}</p>
</progress-circle>

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

<progress-circle class="sample1"
    :completed-steps="5" :total-steps="10"
    start-color="var(--my-color)"
    stop-color="var(--my-color)">
</progress-circle>
<progress-circle class="sample2"
    :completed-steps="5" :total-steps="10"
    start-color="var(--my-color)"
    stop-color="var(--my-color)">
</progress-circle>

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.