SOURCE

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var range = document.getElementById('r');

//range控件信息
var rangeValue = range.value;
var nowRange = 40;   //用于做一个临时的range

//画布属性
var mW = canvas.width = 350;
var mH = canvas.height = 350;
var lineWidth = 1;

//圆属性
var r = mH / 2; //圆心
var cR = r - 32 * lineWidth; //圆半径

//Sin 曲线属性
var sX = 0;
var axisLength = mW; //轴长
var waveWidth = 0.018 ;   //波浪宽度,数越小越宽    
var waveHeight = 16; //波浪高度,数越大越高
var speed = 0.04; //波浪速度，数越大速度越快
var xOffset = 0; //波浪x偏移量

ctx.lineWidth = lineWidth;

//画圈函数
var IsdrawCircled = false;
var drawCircle = function(){

    ctx.beginPath();
    ctx.strokeStyle = '#1080d0';
    ctx.arc(r, r, cR+1, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(r, r, cR, 0, 2 * Math.PI);
    ctx.clip();
    IsdrawCircled = true;
}

//画sin 曲线函数
var drawSin = function(xOffset, color, waveHeight){
    ctx.save();

    var points=[];  //用于存放绘制Sin曲线的点

    ctx.beginPath();
    //在整个轴长上取点
    for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
        //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
        var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;

        var dY = mH * (1 - nowRange / 100 );

        points.push([x, dY + y * waveHeight]);
        ctx.lineTo(x, dY + y * waveHeight);     
    }

    //封闭路径
    ctx.lineTo(axisLength, mH);
    ctx.lineTo(sX, mH);
    ctx.lineTo(points[0][0],points[0][1]);
    ctx.fillStyle = color;
    ctx.fill();

    ctx.restore();
};

var render = function(){
    ctx.clearRect(0, 0, mW, mH);

    rangeValue = range.value;

    if(IsdrawCircled == false){
        drawCircle();   
    }

    if(nowRange <= rangeValue){
        var tmp = 1;
        nowRange += tmp;
    }

    if(nowRange > rangeValue){
        var tmp = 1;
        nowRange -= tmp;
    }

    drawSin(xOffset+Math.PI*0.7, 'rgba(28, 134, 209, 0.5)', 18);
    drawSin(xOffset, '#1c86d1', 18);
    drawText(); 

    xOffset += speed;
    requestAnimationFrame(render);
}
//写百分比文本函数
var drawText = function(){
    ctx.save();

    var size = 0.4*cR;
    ctx.font = size + 'px Microsoft Yahei';
    ctx.textAlign = 'center';
    ctx.fillStyle = "rgba(06, 85, 128, 0.5)";
    ctx.fillText(~~nowRange + '%', r, r + size / 2);

    ctx.restore();
};

render();

<canvas id="c"></canvas>
    <input type="range" id="r" min="0" max="100" step="1">

body{
        position: relative;
        width:100vw;
        height: 100vh;
        margin: 0;
    }
    canvas{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
        border: 1px dashed rgba(0,0,0,0.1)
    }