RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/keiwen/vue-progress-circle below:

Keiwen/vue-progress-circle: Circle progress bar component for vueJS

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

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

<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!

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4