zoukankan      html  css  js  c++  java
  • vue慕课网音乐项目手记:30-音乐环形进度条的实现

    环形进度条是基于svg实现的。

    <template>  
      <div class="progress-circle">  
        <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">  
        <!-- width/height表示svg的宽高,viewBox表示根据svg的宽高拉出来的大小 -->  
          <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent" />  
          <!-- r表示半径,cx 和 cy 属性定义圆点的 x 和 y 坐标 fill表示背景色 -->  
          <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/>  
        </svg>  
        <slot></slot>  
      </div>  
    </template>  
    <style lang="stylus" scoped>  
      @import '~common/stylus/variable'  
      
      .progress-circle  
        position relative  
        circle  
          stroke-width 8px  
          // stroke-width表示环形的宽度  
          transform-origin center  
          // 中心旋转  
          &.progress-background  
            transform scale(0.9)  
            stroke $color-theme-d  
          &.progress-bar  
            transform scale(0.9) rotate(-90deg)  
            stroke $color-theme  
    </style> 

    逻辑的实现:

  • 相关阅读:
    ASIX配置vlan tag能被wireshark获取
    翻译-cmake教程
    Manjaro打造开发环境
    Frida入门
    安卓应用启动底层执行逻辑
    集合框架
    oracle清除日志内存
    flutter widgets目录
    给设备添加udid
    5.class
  • 原文地址:https://www.cnblogs.com/catbrother/p/9181070.html
Copyright © 2011-2022 走看看