vue-colorful-circle

Install

$ yarn add vue-colorful-circle

Usage

you can use this component to draw colorful circles like CSS gradients, also you can pass progress as prop to define the fill part

Basic

import ColorfulCircle from 'vue-colorful-circle'
<ColorfulCircle :progress="35" />

Custom

Optionally, you can pass the following props and customize it as your will

import ColorfulCircle from 'vue-colorful-circle'
<ColorfulCircle
  startColor="#535FE9" //String: Color of gradient where start
  middleColor="#000000" //String: Color of gradient in middle, you can ignore it
  endColor="#9D4EC5" //String: Color of gradient where end
  :responsive="false" // Boolean: Make SVG adapt to parent size
  size="100" // String: Defines the size of the circle.
  lineWidth="25" // String: Defines the thickness of the circle's stroke.
  :progress="0" // Number: Update to change the progress and percentage.
  progressColor="rgb(76, 154, 255)" // String: Color of "progress" portion of circle.
  bgColor="#ecedf0" // String: Color of "empty" portion of circle.
  textColor="#6b778c" // String: Color of percentage text color.
  textStyle="bold 4rem Helvetica, Arial, sans-serif" // CSSProperties: Custom styling for percentage.
  :percentSpacing="10" // Number: Adjust spacing of "%" symbol and number.
  :roundedStroke="false" // Boolean: Rounded/Flat line ends
  :showPercentage="true" // Boolean: Show/hide percentage.
  :showPercentageSymbol="true" // Boolean: Show/hide only the "%" symbol.
/>