vue-circliful-vue3

by Mladen Mihajlovic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<div id="App">
  <circliful :half-circle="true" text="mika76" :percent="54">
  </circliful>

  <circliful :half-circle="false" foreground-border-width="5" background-border-width="1" :percent="88" icon-color="#3498DB" icon="f004" icon-size="40" icon-position="middle">
  </circliful>
  <circliful :percent="34" foreground-border-width="5" background-border-width="5" background-color="#ececf1" foreground-color="#6f3dff" font-color="#1A1721" :text-additional-css="{ 'font-size': '30px', 'transform': 'translateY(10px)' }">
  </circliful>

</div>

CSS

body {
  
  font: 15px Arial
}

.circliful .outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 19.8;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}


/* full circle 25 empty 534 */

.circliful .inner {
  fill: transparent;
  stroke: orange;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
  stroke-dashoffset: 0;
}

.circliful {
  overflow: visible !important;
}

.svg-container {
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

svg .icon {
  font-family: FontAwesome;
}


/*!
 *  Material Design Iconic Font by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/
 *  License - http://zavoloklom.github.io/material-design-iconic-font/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.zmdi {
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zmdi-hc-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.zmdi-hc-2x {
  font-size: 2em;
}

.zmdi-hc-3x {
  font-size: 3em;
}

.zmdi-hc-4x {
  font-size: 4em;
}

.zmdi-hc-5x {
  font-size: 5em;
}

.zmdi-hc-fw {
  width: 1.28571429em;
  text-align: center;
}

.zmdi-hc-ul {
  padding-left: 0;
  margin-left:...

JavaScript

const circliful = Vue.defineComponent({
  props: {
    foregroundColor: {
      default: "#3498DB",
    },
    backgroundColor: {
      default: "#ccc",
    },
    pointColor: {
      default: "none",
    },
    fillColor: {
      default: 'none',
    },
    foregroundBorderWidth: {
      default: 15,
    },
    backgroundBorderWidth: {
      default: 15,
    },
    pointSize: {
      default: 28.5,
    },
    fontColor: {
      default: '#aaa',
    },
    percent: {
      type: Number,
      default: 75,
    },
    animation: {
      type: Number,
      default: 1,
    },
    animationStep: {
      type: Number,
      default: 5,
    },
    icon: {
      default: 'none',
    },
    iconSize: {
      default: '30',
    },
    iconColor: {
      default: '#ccc',
    },
    iconPosition: {
      default: 'top',
    },
    target: {
      default: 0,
    },
    start: {
      default: 0,
    },
    showPercent: {
      default: 1,
    },
    percentageTextSize: {
      default: 22,
    },
    //percentageX: {
    //  default: 100,
    //},
    //percentageY: {
    //  default: 100,
    //},
    textAdditionalCss: {
      //default: { },
    },
    targetPercent: {
      default: 0,
    },
    targetTextSize: {
      default: 17,
    },
    targetColor: {
      default: '#2980B9',
    },
    text: {
      default: null,
    },
    textStyle: {
      default: null,
    },
    textColor: {
      default: '#666',
    },
    textY: {
      default: null,
    },
    textX: {
      default: null,
    },
    multiPercentage: {
      default: 0,
    },
    percentages: {
      default: null,
    },
    textBelow: {
      default: false,
    },
    noPercentageSign: {
      default: false,
    },
    replacePercentageByText: {
      default: null,
    },
    halfCircle: {
      default: false,
    },
    animateInView: {
      default: false,
    },
    decimals: {
      default: 0,
    },
    alwaysDecimals: {
      default: false,
    },
    title: {
      default: 'Circle...