JavaScript implements circular progress bar effect

This article example shares the specific code of JavaScript to achieve the circular progress bar effect for your reference. The specific content is as follows

<!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: dashed line stroke-dashoffset: offset interval*/
    }
  </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'>Start loading</text>
  </svg>
</body>
<script async type='text/javascript'>
//js code see below</script>

</html>

1. Native js implementation

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='Loading completed'
    }
  },500)

2. jQuery Implementation

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('Loading completed');
      clearInterval(timer)
      
    }
  }, 500)

3. Initially implement it according to your own ideas

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('Loading completed')
    }
  },500)

Summarize

Knowledge points: svg drawing, js native operation, jQuery

stroke-dasharray: dashed line
stroke-dashoffset: offset interval

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Several methods of javascript progress bar
How to implement progress bar in js
JavaScript to achieve web page loading progress bar code is super simple
js progress bar implementation code
JS progress bar effect implementation code organization
JS realizes the effect of circular progress bar (from 0 to 100%)
Simple progress bar control written in Javascript jquery css
Progress bar effect implemented with CSS+JS
js realizes audio control progress bar function
Using Session with Javascript in PHP to implement file upload progress bar function

<<: MySQL query specifies that the field is not a number and comma sql

>>: Common usage of regular expressions in Mysql