vue-svg-arc-animation
v0.0.5
Published
Animate SVG using d3.js
Downloads
3
Readme
Vue SVG Arc Animation
Built with Vue.js and D3. Developed by iskandarjamil.
Demo
Installation
# Intall via NPM
$ npm install vue-svg-arc-animation --save
or
# Intall via Bower
$ bower install vue-svg-arc-animation --saveUsage
<body>
<div id="main">
<svg-arc-animation :value="300" :total="1000"></svg-arc-animation>
<svg-arc-animation :value="700" :total="1000" :size="100" :delay="200" :duration="2000" :color="'orange'"></svg-arc-animation>
<svg-arc-animation :value="500" :total="1000" :size="80" :delay="400" :duration="2000" :color="'blue'" :direction="'rtl'"></svg-arc-animation>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="./dist/svg-arc-animation.min.js"></script>
<script>
var app = new Vue({
el : '#main',
});
</script>
</body>or
<body>
<div id="main"></div>
<script>
import Vue from 'vue';
import SvgArcAnimation from "vue-svg-arc-animation";
Vue.use(SvgArcAnimation);
new Vue({
el: '#main',
template: `
<div>
<svg-arc-animation :value="300" :total="1000"></svg-arc-animation>
<svg-arc-animation :value="700" :total="1000" :size="100" :delay="200" :duration="2000" :color="'orange'"></svg-arc-animation>
<svg-arc-animation :value="500" :total="1000" :size="80" :delay="400" :duration="2000" :color="'blue'" :direction="'rtl'"></svg-arc-animation>
</div>
`,
});
</script>
</body>License
MIT license.