zoukankan      html  css  js  c++  java
  • 环形进度条

    ProjressCircle.vue

    <template>
      <div class="progress-circle">
        <svg :width="size" :height="size" viewBox="0 0 100 100">
          <circle r="50" cx="50" cy="50" fill="transparent" class="progress-background"></circle>
          <circle r="50" cx="50" cy="50" fill="transparent" class="progress-bar" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"></circle>
        </svg>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        size: { type: Number, default: 100 },
        percent: { type: Number, default: 0 }
      },
      data() {
        return { dashArray: Math.PI * 2 * 50 }
      },
      computed: {
        dashOffset() {
          return (1 - this.percent) * this.dashArray
        }
      }
    }
    </script>
    
    <style scoped>
    circle {
      stroke- 10px;
      transform-origin: center;
    }
    .progress-background {
      transform: scale(0.9);
      stroke: rgba(66, 66, 66, 0.5);
    }
    .progress-bar {
      stroke: greenyellow;
      transform: rotate(-90deg) scale(0.9);
    }
    </style>

    使用:

        <ProjressCircle :size="100" :percent="0.2"></ProjressCircle>

    效果:

  • 相关阅读:
    P4549 【模板】裴蜀定理
    POJ1606 Jugs
    2. 数据库连接池规范
    14. BootStrap * 组件
    BootStarpt
    13. Flex 弹性布局2 BootStrap
    12. Flex 弹性布局 BootStrap
    CSS3
    21. Servlet3.0 / 3.1 文件上传 Plus
    20. Servlet3.0 新特性
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15320959.html
Copyright © 2011-2022 走看看