css+js实现录音环形进度条

在html5或者移动端开发中，如果需要用户录音功能，那么应该是需要用户点击触发动画来实现一个录音的动效或者控制时间

1. 简单实现一个滚动条效果

具体效果如下：

可以自定义圆环的轨道灰色为其他色或者透明，也可以自定义进度条的颜色为别的颜色，中间是一个图片，可以自定义

代码如下：

1. html代码

<div class="record-container">
    <div class="circle_process" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="stopRecord">
      <div class="wrapper right">
        <div class="circle rightcircle" ref="rightCircle"></div>
      </div>
      <div class="wrapper left">
        <div class="circle leftcircle" ref="leftCircle"></div>
      </div>
      <div class="middle-circle">
      	<!--这里不要直接使用图片作为中间的录制图片，ios上按压会默认提示保存图片-->
        <!--<img src="../images/record/record_btn_mini.png" alt="">-->
      </div>
    </div>
  </div>

2. css代码

  .record-container