Giter VIP home page Giter VIP logo

vue3-circle-progress's Introduction

Vue 3 Circle Progress

Vue 3 Circle Progress

Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable.

Table of contents


Live demo: codesandbox.io/s/determined-dawn-3ybev

Installation

Install with npm:

npm install --save vue3-circle-progress

or yarn:

yarn add vue3-circle-progress

Usage and Examples

<template>
  
  // Basic Usage
  <circle-progress :percent="40" />
  
  // Default Gradient
  <circle-progress :is-gradient="true"  />

  // Customize Gradient
  <circle-progress
      :is-gradient="true"
      :gradient="{
        angle: 90,
        startColor: '#ff0000',
        stopColor: '#ffff00'
    }"
  />

  // Default Shadow
  <circle-progress :is-bg-shadow="true" />

  // Customize Shadow
  <circle-progress
      :is-bg-shadow="true"
      :bg-shadow="{
        inset: true,
        vertical: 2,
        horizontal: 2,
        blur: 4,
        opacity: .4,
        color: '#000000'
    }"
      empty-color="#f7f7f7"
      :border-width="6"
      :border-bg-width="30"
  />
</template>


<script>

import "vue3-circle-progress/dist/circle-progress.css";
import CircleProgress from "vue3-circle-progress";
export default {
  components: {CircleProgress}
}

</script>

Props

Available Props, this package supports 30+ props

Names Description Default Value Type Range/Max
size Circle height & Width 180 Int ∞
border-width Circle Border width 15 Int ∞
border-bg-width Circle Border Background width 15 Int ∞
fill-color Stroke Fill Color #288feb String N/A
empty-color Stroke (empty) BG Fill Color #288feb String N/A
background Circle Background none String N/A
class Component Custom Class '' String N/A
percent Fill Percent 55 Int 100
linecap Stroke Line Style round String N/A
is-gradient Enable Gradient false Boolean N/A
transition Apply transition when percent change 200 (ms) Int ∞
gradient Gradient Essential Values {...} Object N/A
is-shadow Enable Circle Shadow false Boolean N/A
shadow Shadow Essential Values {...} Object N/A
is-bg-shadow Enable Circle BG Shadow false Boolean N/A
bg-shadow Shadow Essential Values {...} Object N/A
viewport Animate when element is in viewport true Boolean N/A
on-viewport Callback function to detect viewport undefined Function N/A
show-percent Enable disable percent counter false Boolean N/A
unit Unit of percent counter '%' String N/A

Example:

<template>
  <circle-progress
      :is-bg-shadow="true"
      :bg-shadow="{
        inset: true,
        vertical: 2,
        horizontal: 2,
        blur: 4,
        opacity: .4,
        color: '#000000'
    }"
      empty-color="#f7f7f7"
      :border-width="6"
      :border-bg-width="30"
  />
</template>

<script>

import CircleProgress from "vue3-circle-progress";
export default {
  components: {CircleProgress}
}

</script>

props.gradient

Names Description Default Value Type Range/Max
angle Gradinet Angle 0 Int 0-360
startColor Gradient Start Color #ff0000 String N/A
stopColor Gradient Stop Color #ffff00 String N/A

Example:

<circle-progress 
    :is-gradient="true" 
    :gradient="{
        angle: 90,
        startColor: '#ff0000',
        stopColor: '#ffff00'
    }"
/>

props.shadow

Names Description Default Value Type Range/Max
inset Set Shadow Inset or Outset false Boolean N/A
vertical Shadow Vertical Offset 3 Int ∞
horizontal Shadow Horizontal Offset 0 Int ∞
blur Shadow Blur 0 Int ∞
opacity Shadow Opacity .4 Float 0-1
color Shadow Color #000000 String 0-1

Example

<circle-progress
    :is-shadow="true"
    :shadow="{
        inset: true,
        vertical: 2,
        horizontal: 2,
        blur: 4,
        opacity: .4,
        color: '#000000'
    }"
/>

props.bgShadow

Names Description Default Value Type Range/Max
inset Set Shadow Inset or Outset false Boolean N/A
vertical Shadow Vertical Offset 3 Int ∞
horizontal Shadow Horizontal Offset 0 Int ∞
blur Shadow Blur 0 Int ∞
opacity Shadow Opacity .4 Float 0-1
color Shadow Color #000000 String 0-1

Example

<circle-progress
    :is-bg-shadow="true"
    :bg-shadow="{
        inset: true,
        vertical: 2,
        horizontal: 2,
        blur: 4,
        opacity: .4,
        color: '#000000'
    }"
/>

Callback

This callback function fires when the target element is in the viewport.

<circle-progress
    :on-viewport="() => {
        // do something
    }" 
/>

vue3-circle-progress's People

Contributors

af-lsh avatar delowardev avatar odumz avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

vovchisko trendingtechnology aikhsanov af-lsh ilhamsabir rafaelhutter jj-33 odumz jonmak app97204 lainez rmartinho jpgupta wardhanisukoco

vue3-circle-progress's Issues

Change fill-color via CSS

Hi,
I am using your component in my Ionic/Vue.ts app, it works well but I am unable to set the fill-color prop to a custom hex value because of some weird babel/eslint parser issue I can't solve.(VueCompilerError: Error parsing JavaScript expression: Identifier directly after the number.). Is there any CSS hack to change the color fill to another color? Thanks

linecap Issue

<circle-progress :size="16" :border-bg-width="5" :border-width="5" :percent="40" :linecap="butt" />

:linecap is not working.
Can you fix it up please?

Title inside the circle

Hi Delowar Hossain, tanks for this vue component, I have a question for you, how can i set title inside de circle, example 55% and will be cool if the title go 0%... to 100% if is posible.

How add symbol %

How add '%' symbol behing percentage value ?

I saw in first example that value at center of circle is equals to '55%'.

Thanks in advance

Vue 3 with typescript setup. No types from vue3-circle-progress

Hello ,

I spin up a new Vue 3 project with typescript from Vue CLI command. I open up my IDE and try to import CircleProgress from vue3-circle-progress.

I get error/warning from

Try `npm i --save-dev @types/vue3-circle-progress` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-circle-progress';`Vetur(7016)

Custom shadow color

I want to use custom progress shadow color

:is-shadow="true" :shadow="{ inset: false, vertical: 2, horizontal: 2, blur: 4, opacity: .4, color: '#41AF6D' }"
But it render black shadow

Chart displays -1 when initialized with (and not changed) percentage of 0

You may like to check if the step is !== 0 in your animateValue function

For example:

function animateValue(to) {
      const step = to - currentPercent.value;
      if (step) {
        const delay = props.transition / Math.abs(step);
        const counter = setInterval(() => {
          if (step > 0) {
            currentPercent.value += 1;
            if (currentPercent.value >= to) {
              clearInterval(counter);
            }
          } else {
            currentPercent.value -= 1;
            if (currentPercent.value <= to) {
              clearInterval(counter);
            }
          }
        }, delay);
      }
    }

How update percent value

Hello

I little bit confused.. I am using vue3-circle-progress component in my app.
I didn't find a way to update percent value dynamically.

It seems that in documentation no information about this feature.

Could you have any advice to share.

Many thanks.

Kind regards

Object is not a function

I am getting below error when I use it.

circle-progress.umd.min.js?78da:1 Uncaught TypeError: Object(...) is not a function
at eval (circle-progress.umd.min.js?78da:1)
at a (circle-progress.umd.min.js?78da:1)
at Module.fb15 (circle-progress.umd.min.js?78da:1)
at r (circle-progress.umd.min.js?78da:1)
at 00ee (circle-progress.umd.min.js?78da:1)
at eval (circle-progress.umd.min.js?78da:1)
at eval (circle-progress.umd.min.js?78da:1)
at eval (circle-progress.umd.min.js?78da:1)
at Object../node_modules/vue3-circle-progress/dist/circle-progress.umd.min.js (chunk-vendors.js:2932)
at webpack_require (app.js:849)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.