前端页面实现环形进度条

框架：vue

<template>
	<!-- viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的
	不管svg像素多少，都是一个0,0为原点,宽高200个单位的坐标系统，单位与像素无关
	宽高100个单位，即坐标系宽高的一半，border是坐标系单位，不是像素单位
	 -->
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
    :width="width+'rem'" :height="width+'rem'"
  >
    <circle cx="100" cy="100" :r="100 - border / 2" 
      fill="none"
      opacity="1"
      stroke="#fff" 
      :stroke-width="border"
    />
    <circle cx="100" cy="100" :r="100 - border / 2" 
      fill="none"
      transform-origin="50% 50%"
      transform="rotate(90)" 
      :stroke="color" 
      :stroke-width="border"
      :stroke-dasharray="dashLen" 
      :stroke-dashoffset = "dashOffset"
      stroke-linecap="round"
      style="transition: stroke-dashoffset 0.4s"
    />
    <text x="100" y="100" text-anchor="middle"
      fill="#ff6321"
      :font-size="45"
      font-weight="600" >
      {{timeLeft}}{{text}}
    </text>
    <text x="100" y="140" text-anchor="middle"
      :font-size="30" >
      {{tips}}
    </text>
  </svg>
</template>

<script>
export default {
  name: 'circlePercent',
  props: {
    target: {
      type: Number,
      required: true
    },
    count: {
      type: Number,
      required: true
    },
    width: {
      type: Number,
      default: 1
    },
    border: {
      type: Number,
      default: 28
    },
    color: {
      type: String,
      default: '#fcaa55'
    },
    fontSize: {
      type: Number,
      default: 30
    }, 
    delay: {
      type: Number,
      default: 2
    }, 
    tips:{
		type:String, 
		default:'完成'
    },
    text:{
    	type:String, 
    	default:'%'
    }
  },
  data () {
    return {
      timeLeft: 0,
      dashLen: (100 - this.border / 2) * Math.PI * 2
    }
  },
  computed: {
    dashOffset () {
      return this.dashLen - this.timeLeft / this.count * this.dashLen
    }
  },
  mounted () {
    var _this = this
  	setTimeout(function(){
  		_this.run()
  	}, _this.delay)
  }, 
  methods:{
  	run:function() {
	    this.timeLeft = 0

      var _this = this
	    this.interval = setInterval(function (){

	      var diff = _this.target / 10
	      _this.timeLeft += diff < 1 ? 1 : diff

	      _this.timeLeft = parseInt(_this.timeLeft)
	      
	      if (_this.timeLeft >= _this.target) {
	        _this.timeLeft = _this.target
	        clearInterval(_this.interval)
	      }

	    }, 60)
  	}
  }
}
  
</script>

大致原理：

svg相当于一块画布，可以设置宽高，这里使用

:width="width+'rem'" :height="width+'rem'"

主要为移动设备提供，可以自行修改为px

svg中的viewbox相当于自定义单位，也就是自己的坐标轴，这里viewbox没有px或者rem单位，只是简单的坐标单元格单位，这里设置0，0，200，200表示左上角坐标是0，0，宽高各200个单位，也就是右下角坐标为200，200

进度条部分：

两个circle，一个做进度条的背景色，一个做进度占比的背景色，主要用stroke做环和环上的进度条

stroke表示线段的颜色，也就是那个环

fill表示圆的背景色，stroke-width表示线条的宽度，也就是那个环的厚度

stroke-dasharray和stroke-dashoffset表示画一条虚线，stroke-dasharray表示虚线中的一段线+虚线中的一段间隔长度，设置为进度占比的颜色，stroke-dashoffset表示虚线的间隔的长度，那么dasharry-dashoffset就是虚线中的线段的长度，设计好比例就能实现环形的比例

圆的起始位置不一定是自己想要的，我想从6点钟开始转，于是设置transform：rotate，参数自己设置，

stroke-linecap="round"是进度比的虚线有弧度，不过设置了dasharray和dashoffset就只能看到一段了，看起来像是那唯一的一条线。

style="transition: stroke-dashoffset 0.4s"本意是设置动画，但是不一定生效，iPhone上开启减弱动态效果会使部分动画效果失效，其他手机看情况，所以我自己实现了run函数，用来控制进度

transform rotate是用来旋转带颜色的环的，默认是左上角的顶点开始旋转，默认是x的正方向轴为0度，而我需要进度条从顶点开始运动，所以需要旋转，

transform-origini是设置旋转的中心的，不想从左上角的顶点开始旋转，想从中心旋转就设置transform-origin: "50% 50%"

transform scale可以用来左右翻转scale(-1, 1),或者垂直翻转scale(1, -1),这个跟环的前进方向有关，有时候需要逆时针，有时候需要顺时针

 

 

两个text，是在环形进度条中间部分写点东西，也可以自定义

至于函数中的var _this = this，主要是兼容es5，可能有的浏览器不兼容es6语法()=>{}

run函数是控制进度的，每隔60ms更新当前进度达到进度条从0开始跑动的效果

使用：

main.js中注册

Vue.component(circlePercent.name, circlePercent)

其他vue文件中调用

        <circlePercent 
          :count="100" 
          :target="student.score" 
          :delay="800" 
          class="percent1">        
        </circlePercent> 

主要使用了svg画进度条，其他框架或纯html、js可以通用

这个环设置了transform: "rotate(90deg) scale(-1, 1)" transform-origin:"50% 50%"

感兴趣的可以自定义