vue-pithy-progress

vue-pithy-progress

Progress bar component for Vue.js(2.x). This project contains three common components（circle-progress、semi-circle-progres、progress-bar）uses SVG to show progress.

English|中文

Installation

npm install vue-pithy-progress

Usage

Global registration

import VuePithyProgress from 'vue-pithy-progress'
import 'vue-pithy-progress/dist/vue-pithy-progress.css'
Vue.use(VuePithyProgress)

<circle-progress :percentage="percentage"> </circle-progress>

<semi-circle-progress :percentage="percentage" />

<progress-bar :percentage="percentage" />

Use single component

import semiCircleProgress from 'vue-pithy-progress/lib/semi-circle-progress.umd.min.js'
import 'vue-pithy-progress/lib/semi-circle-progress.css'

<semi-circle-progress :percentage="percentage" />

export default {
  name: 'App',
  data() {
    return {
      percentage: 10
    }
  },
  components: { semiCircleProgress }
}

demo

<template>
  <div id="app">
    <div class="con">
      <circle-progress :percentage="percentage"> </circle-progress>
    </div>
    <div style="margin-top:10px;">
      <semi-circle-progress :percentage="percentage" />
    </div>
    <div style="width:220px; margin-top:60px;">
      <progress-bar :percentage="percentage" />
    </div>

    <div class="btn-wrapper" style="margin-top:10px;">
      <button @click="changeProgrss">increase</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      percentage: 10
    }
  },
  methods: {
    changeProgrss() {
      this.percentage += 10
    }
  }
}
</script>

circle-progress

props

slots

semi-circle-progress

props

slots

progress-abr

props

slots

Dev

npm install
npm run serve

build

npm run build

License

MIT