Progress 进度条

<template>
  <div>
    <a-progress :percent="30" />
    <a-progress :percent="50" status="active" />
    <a-progress :percent="70" status="exception" />
    <a-progress :percent="100" />
    <a-progress :percent="50" :showInfo="false" />
  </div>
</template>

<template>
  <div>
    <a-progress type="circle" :percent="75" />
    <a-progress type="circle" :percent="70" status="exception" />
    <a-progress type="circle" :percent="100" />
  </div>
</template>
<style scoped>
  .ant-progress-circle-wrap,
  .ant-progress-line-wrap {
    margin-right: 8px;
    margin-bottom: 5px;
  }
</style>

<template>
  <div style="width: 170px">
    <a-progress :percent="30" size="small" />
    <a-progress :percent="50" size="small" status="active" />
    <a-progress :percent="70" size="small" status="exception" />
    <a-progress :percent="100" size="small" />
  </div>
</template>

<template>
  <div>
    <a-progress type="circle" :percent="30" :width="80" />
    <a-progress type="circle" :percent="70" :width="80" status="exception" />
    <a-progress type="circle" :percent="100" :width="80" />
  </div>
</template>
<style scoped>
  .ant-progress-circle-wrap,
  .ant-progress-line-wrap {
    margin-right: 8px;
    margin-bottom: 5px;
  }
</style>

<template>
  <div>
    <a-progress type="circle" :percent="percent" />
    <a-button-group>
      <a-button @click="decline" icon="minus" />
      <a-button @click="increase" icon="plus" />
    </a-button-group>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        percent: 0,
      }
    },
    methods: {
      increase() {
        let percent = this.percent + 10;
        if (percent > 100) {
          percent = 100;
        }
        this.percent = percent
      },
      decline() {
        let percent = this.percent - 10;
        if (percent < 0) {
          percent = 0;
        }
        this.percent = percent
      },
    },
  }
</script>

<template>
  <div>
    <a-progress type="circle" :percent="75" :format="percent => `${percent} Days`"/>
    <a-progress type="circle" :percent="100" :format="() => 'Done'" />
  </div>
</template>
<style scoped>
  div.ant-progress-circle,
  div.ant-progress-line {
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>

<template>
  <div>
    <a-progress :percent="percent" />
    <a-button-group>
      <a-button @click="decline" icon="minus" />
      <a-button @click="increase" icon="plus" />
    </a-button-group>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        percent: 0,
      }
    },
    methods: {
      increase() {
        let percent = this.percent + 10;
        if (percent > 100) {
          percent = 100;
        }
        this.percent = percent
      },
      decline() {
        let percent = this.percent - 10;
        if (percent < 0) {
          percent = 0;
        }
        this.percent = percent
      },
    },
  }
</script>

<template>
  <div>
    <a-progress type="dashboard" :percent="75" />
  </div>
</template>

<template>
  <a-tooltip title="3 done / 3 in progress / 4 to do">
    <a-progress :percent="60" :successPercent="30" />
  </a-tooltip>
</template>

<template>
  <div>
    <a-progress strokeLinecap="square" :percent="75" />
    <a-progress strokeLinecap="square" :percent="75" type="circle" />
    <a-progress strokeLinecap="square" :percent="75" type="dashboard" />
  </div>
</template>