JavaScript实现圆形进度条的三种方案：原生、jQuery与自定义逻辑

作者：函数茶馆

时间：2026-10-24

本文详细解析利用SVG的stroke-dasharray和stroke-dashoffset属性实现圆形进度条的三种方法。涵盖原生JavaScript获取路径总长、jQuery操作DOM以及自定义数组控制进度的具体代码实现，帮助开发者快速掌握前端动态图表绘制技巧。

文章目录

本文分享使用JavaScript实现圆形进度条的具体代码示例，供读者参考学习。


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    .itemwait{
      position:absolute;
      top : 0;
      bottom:0;
      left:0;
      right:0;
      margin: 0 auto; 
    }
    .progress{
      stroke-dasharray: 251; 
      stroke-dashoffset: 0;
      /* 
      stroke-dasharray： 虚线
      stroke-dashoffset: 偏移间隔   
      */
    }
  </style>
</head>
<body>
  <svg width="200" height="200" version="1.1" class='itemwait'>
    <circle class='progress' cx="100" cy="50" r="40" stroke="pink" stroke-width="5" fill="transparent" />
    <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>开始加载</text>
  </svg>
</body>
<script async type='text/javascript'>
//js代码见下文
</script>

</html>

第一种方案：使用原生JavaScript实现。


const loadingArr=[1,2,10,20,40,70,90,100]
  let index=0
  var timer=setInterval(()=>{
    let total=document.querySelector('.progress').getTotalLength();
    let progress=document.querySelector('.progress')
    console.log(typeof total)
    progress.style.strokeDashoffset=(total)*(1-loadingArr[index]/100)
    if(index<=loadingArr.length){
      document.querySelector('.text').textContent=`${loadingArr[index]}%`   
  }
    index++
    if(index===loadingArr.length){
      clearInterval(timer)
      document.querySelector('.text').textContent='加载完成'
    }
  },500)

第二种方案：基于jQuery库实现。


let index = 0
  var $circle = $('.progress');
  var r = $circle.attr('r');
  var timer = setInterval(() => {
    var total = Math.PI * (r * 2);
    var pct = (1-index / 100) * total;
    console.log(typeof pct,pct)
    if (index <= 100) {
      $('.text').text(`${index}%`);
      $circle.css({ strokeDashoffset: pct });
    }
    index = index + 10
    if (index > 100) {
      $('.text').text('加载完成');
      clearInterval(timer)
      
    }
  }, 500)

第三种方案：根据自定义逻辑进行实现。


const loadingArr=[1,2,10,20,40,70,90,100]
  let index=0
  var timer=setInterval(()=>{
    let total=document.querySelector('.progress').getTotalLength();
    let progress=document.querySelector('.progress')
    console.log(typeof total)
    progress.style.strokeDashoffset=(total)*(1-loadingArr[index]/100)
    $('.text').text(function(){
      if(index<=loadingArr.length){
       return `${loadingArr[index]}%`
      }
    })
    index++
    if(index===loadingArr.length){
      clearInterval(timer)
      $('.text').text('加载完成')
    }
  },500)