JavaScript实现圆形进度条效果

更新时间：2021年08月25日 09:24:43 作者：_he_dan_

这篇文章主要为大家详细介绍了JavaScript实现圆形进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

1.原生js实现

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)

2.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)

3.最初按照自己的想法实现

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)

总结

知识点：svg绘图、js原生操作、jQuery

stroke-dasharray：虚线
stroke-dashoffset: 偏移间隔

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
进度条

可拖拽组件slider.js使用方法详解
这篇文章主要为大家详细介绍了可拖拽组件slider.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
小程序统计来源信息的方案与具体代码
微信小程序数据统计,现在有很多的统计方法和统计工具,下面这篇文章主要给大家介绍了关于小程序统计来源信息的方案与具体代码,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
js TextArea的选中区域处理
js中对于TextArea的选中区域后进行处理的代码，需要的朋友可以参考下。
2010-12-12
简单三步实现报表页面集成天气
本文主要介绍了基于javascript实现报表页面集成天气的方法步骤，简单三步，一看就懂。具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
微信小程序实现简单购物车功能
这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
Javascript中找到子元素在父元素内相对位置的代码
因为想自动定位到子元素，所以一直在找各种找寻元素位置的代码。不过总是找不到可以定位子元素相对位置的代码
2012-07-07
微信小程序实现滑动切换自定义页码的方法分析
这篇文章主要介绍了微信小程序实现滑动切换自定义页码的方法,结合实例形式分析了微信小程序页码动态切换相关实现技巧与注意事项,需要的朋友可以参考下
2018-12-12
Javascript面试经典套路reduce函数查重
reduce函数，是ECMAScript5规范中出现的数组方法.下面通过本文给大家分享Javascript面试经典套路reduce函数查重，需要的朋友参考下吧
2017-03-03
js触发asp.net的Button的Onclick事件应用
由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已,感兴趣的朋友可以了解下，或许对你有所帮助
2013-02-02
select2 ajax 设置默认值,初始值的方法
今天小编就为大家分享一篇select2 ajax 设置默认值,初始值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08