JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

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

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <スタイル>
    .itemwait{
      位置:絶対;
      上: 0;
      下:0;
      左:0;
      右:0;
      マージン: 0 自動; 
    }
    。進捗{
      ストロークダッシュ配列: 251; 
      ストロークダッシュオフセット: 0;
      /* 
      stroke-dasharray: 破線stroke-dashoffset: オフセット間隔*/
    }
  </スタイル>
</head>
<本文>
  <svg 幅="200" 高さ="200" バージョン="1.1" クラス='itemwait'>
    <circle class='progress' cx="100" cy="50" r="40" ストローク="ピンク" ストローク幅="5" 塗りつぶし="透明" />
    <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>読み込みを開始</text>
  </svg>
</本文>
<スクリプト非同期タイプ='text/javascript'>
//js コードは下記を参照</script>

</html>

1. ネイティブjs実装

定数ロードArr = [1,2,10,20,40,70,90,100]
  インデックスを0にする
  var タイマー = setInterval(()=>{
    合計を document.querySelector('.progress').getTotalLength() とします。
    進捗状況を document.querySelector('.progress') とします。
    console.log(typeof 合計)
    progress.style.strokeDashoffset = (合計) * (1-loadingArr[インデックス]/100)
    if(インデックス<=読み込みArr.長さ){
      document.querySelector('.text').textContent=`${loadingArr[index]}%`   
  }
    インデックス++
    if(index===loadingArr.length){
      クリアインターバル(タイマー)
      document.querySelector('.text').textContent='読み込みが完了しました'
    }
  },500)

2. jQueryの実装

インデックスを0にする
  var $circle = $('.progress');
  var r = $circle.attr('r');
  var タイマー = setInterval(() => {
    var 合計 = Math.PI * (r * 2);
    var pct = (1-インデックス / 100) * 合計;
    console.log(typeof pct,pct)
    （インデックス<= 100）の場合{
      $('.text').text(`${index}%`);
      $circle.css({ ストロークダッシュオフセット: pct });
    }
    インデックス = インデックス + 10
    （インデックス＞100）の場合{
      $('.text').text('読み込みが完了しました');
      クリアインターバル(タイマー)
      
    }
  }, 500)

3. まずは自分のアイデアに従って実装する

定数ロードArr = [1,2,10,20,40,70,90,100]
  インデックスを0にする
  var タイマー = setInterval(()=>{
    合計を document.querySelector('.progress').getTotalLength() とします。
    進捗状況を document.querySelector('.progress') とします。
    console.log(typeof 合計)
    progress.style.strokeDashoffset = (合計) * (1-loadingArr[インデックス]/100)
    $('.text').text(関数(){
      if(インデックス<=読み込みArr.長さ){
       `${loadingArr[index]}%` を返す
      }
    })
    インデックス++
    if(index===loadingArr.length){
      クリアインターバル(タイマー)
      $('.text').text('読み込みが完了しました')
    }
  },500)