先看效果圖（為了顏色對比明顯，搭配的顏色比較醜，大家可根據專案修改顏色）：

上程式碼：

（1）css部分：

.middleCircle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 13rem;
      height: 13rem;
      border-radius: 50%;
      border: 3px solid #098fb7;
      margin: 117px;
    }

（2）html 部分：

<div class="middleCircle"> 
        <canvas id="mycanvas" width="260" height="260">
            您的瀏覽器不支援html5dcanvas元素
        </canvas>
    </div>
 

（3）js 部分（需引入JQ，也可將JQ寫法改成原生寫法）：

var canvas=$('#mycanvas');//定義變數獲取畫布dom
  var c=mycanvas.getContext('2d');//設定繪圖環境2d
  c.lineWidth=4;//設定線寬
  c.strokeStyle="rgba(206, 118, 83, 0.8)";   //設定邊顏色
  c.fillStyle="rgba(206, 118, 83, 0.8)";     //扇形
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*5/6,Math.PI*1.5,false);
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*7/6,Math.PI*1.5,false);
  c.fill()
  c.beginPath();
  c.lineWidth=3;
  c.strokeStyle="rgba(217, 242, 245, 0.5)";
  var waitTime = 1;
  var waitInterval = setInterval(() => {   // 讓扇形轉動
    waitTime++;
    $('#mycanvas').css("transform", "rotate("+ waitTime +"deg)");
  }, 100)