Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-circle-progress

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-circle-progress

A circular progressbar component for Vue 3, built with SVG and extensively customizable

  • 1.0.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.1K
decreased by-27.29%
Maintainers
1
Weekly downloads
 
Created
Source

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

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

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

NamesDescriptionDefault ValueTypeRange/Max
sizeCircle height & Width180Int
border-widthCircle Border width15Int
border-bg-widthCircle Border Background width15Int
fill-colorStroke Fill Color#288febStringN/A
empty-colorStroke (empty) BG Fill Color#288febStringN/A
backgroundCircle BackgroundnoneStringN/A
classComponent Custom Class''StringN/A
percentFill Percent55Int100
linecapStroke Line StyleroundStringN/A
is-gradientEnable GradientfalseBooleanN/A
transitionApply transition when percent change200 (ms)Int
gradientGradient Essential Values{...}ObjectN/A
is-shadowEnable Circle ShadowfalseBooleanN/A
shadowShadow Essential Values{...}ObjectN/A
is-bg-shadowEnable Circle BG ShadowfalseBooleanN/A
bg-shadowShadow Essential Values{...}ObjectN/A
viewportAnimate when element is in viewporttrueBooleanN/A
on-viewportCallback function to detect viewportundefinedFunctionN/A
show-percentEnable disable percent counterfalseBooleanN/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

NamesDescriptionDefault ValueTypeRange/Max
angleGradinet Angle0Int0-360
startColorGradient Start Color#ff0000StringN/A
stopColorGradient Stop Color#ffff00StringN/A
Example:
<circle-progress 
    :is-gradient="true" 
    :gradient="{
        angle: 90,
        startColor: '#ff0000',
        stopColor: '#ffff00'
    }"
/>

props.shadow

NamesDescriptionDefault ValueTypeRange/Max
insetSet Shadow Inset or OutsetfalseBooleanN/A
verticalShadow Vertical Offset3Int
horizontalShadow Horizontal Offset0Int
blurShadow Blur0Int
opacityShadow Opacity.4Float0-1
colorShadow Color#000000String0-1
Example

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

props.bgShadow

NamesDescriptionDefault ValueTypeRange/Max
insetSet Shadow Inset or OutsetfalseBooleanN/A
verticalShadow Vertical Offset3Int
horizontalShadow Horizontal Offset0Int
blurShadow Blur0Int
opacityShadow Opacity.4Float0-1
colorShadow Color#000000String0-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
    }" 
/>

Keywords

FAQs

Package last updated on 01 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc