JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/vue/0.12.10/vue.js"></script>
<script src="//rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>
<link href="//cdn.bootcss.com/iview/2.0.0-rc.9/styles/iview.css" rel="stylesheet" type="text/css">
<script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
<script src="//cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>

<div id="container">
<i-circle :percent="percent" >
       
         <Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
        <span v-else style="font-size:24px">{{ percent }}%</span>
    </i-circle>
    <Button-group size="large">
        <i-Button icon="ios-plus-empty" @click="add"></i-Button>
        <i-Button icon="ios-minus-empty" @click="minus"></i-Button>
    </Button-group>
</div>

JavaScript

new Vue({

  el: '#container',
  data : {
                percent: 0,
                steps: 10.22
        },
        computed: {
            color () {
                let color = this.percent == 100	? '#5cb85c' : '#2db7f5';
                return color;
            }
        },
        methods: {
            add () {
            		this.percent = Math.min(100, this.percent+this.steps)
            },
            minus () {
            		this.percent = Math.max(0, this.percent-this.steps)
            }
        }
});