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

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)

要約する

知識ポイント: svg 描画、js ネイティブ操作、jQuery

  • ストロークダシャ配列: 破線
  • ストロークダッシュオフセット: オフセット間隔

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript プログレスバーのいくつかのメソッド
  • js でプログレスバーを実装する方法
  • ウェブページの読み込み進捗バーコードを実現するJavaScriptは超シンプルです
  • js プログレスバー実装コード
  • JS プログレスバー効果実装コードの構成
  • JS は円形のプログレスバー(0~100%)の効果を実現します
  • Javascript jquery css で書かれたシンプルなプログレスバーコントロール
  • CSS+JS で実装されたプログレスバー効果
  • js はオーディオ制御プログレスバー機能を実現します
  • PHP で JavaScript とセッションを使用してファイルアップロードの進行状況バー機能を実装する

<<:  MySQLクエリは、フィールドが数値とカンマではないことを指定します。

>>:  Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

推薦する

div の特定の実装は自動的に折り返されず、HTML で折り返されないよう強制されます。

1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

MySQL Community Server 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

UbuntuでOpenCVをコンパイルしてインストールする方法

opencv2 の簡単なインストール: conda インストール --channel https:/...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

CentOS 7.6 仮想ネットワーク カードのバッチ追加、変更、削除操作の紹介

1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...

MySQL8のパスワードを忘れた場合の簡単な解決策

序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする

サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...

MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します

Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...