<template>
  <div class="demo-progress-circle">
    <ui-progress
      :percentage="30"
      type="circle">
    </ui-progress>
    <ui-progress
      :percentage="30"
      :gap-position="'bottom'"
      type="circle">
    </ui-progress>
    <ui-progress
      :percentage="50"
      type="circle"
      status="exception">
    </ui-progress>
    <ui-progress
      :percentage="100"
      type="circle"
      status="success">
    </ui-progress>
  </div>
</template>

<script>
import { Progress } from "amumu-ui"
export default {
  components: {
    "ui-progress": Progress,
  },
}
</script>

<style lang="scss">
.demo-progress-circle {
  .mm-progress--circle {
    margin-right: 20px;
  }
}
</style>
