Vue 3 Circle Progress

!Vue 3 Circle Progress

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

$3

* Installation
* Usage and Examples
* Props
* Gradient (props.gradient)
* Shadow (props.shadow)
* Callback
* Default Props

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

`vue

`

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 |

#### Example:

`vue


`

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:

`vue
: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

`vue

: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

`vue

: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.

`vue
:on-viewport="() => {
// do something
}"
/>
``