【JavaScript】プログレスバー（進捗状況）をページに表示する方法

JavaScript(ジャバスクリプト)

2023.10.242023.10.28

プログレスバーを作る
プログレスバーの基本的な構造を作成
スタイルシートでプログレスバーのスタイルを設定
プログレスバーを制御する
まとめ

プログレスバーを作る

プログレスバーが0％から100％までアニメーションで増加し、ボタンをクリックすることでプログレスバーの進行を開始できます。

プログレスバーを作成する方法はいくつかありますが、以下に基本的なHTMLとCSSを使用して簡単なプログレスバーを作成する手順を示します。

プログレスバーの基本的な構造を作成

HTMLでプログレスバーの基本的な構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プログレスバー</title>
    <link rel="stylesheet" href="styles.css"> <!-- スタイルシートファイルを読み込む -->
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="myProgressBar"></div>
    </div>
    <button onclick="startProgress()">プログレスバー開始</button>
</body>
<script src="script.js"></script> <!-- JavaScriptファイルを読み込む -->
</html>

スタイルシートでプログレスバーのスタイルを設定

スタイルシート（styles.css）でプログレスバーのスタイルを設定します。

/* styles.css */
.progress-container {
    width: 100%;
    background-color: #f3f3f3;
}

.progress-bar {
    width: 0;
    height: 30px;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px;
    color: white;
    font-weight: bold;
}

プログレスバーを制御する

JavaScriptファイル（script.js）でプログレスバーを制御する関数を作成します。

// script.js
function startProgress() {
    var progressBar = document.getElementById("myProgressBar");
    var width = 0;
    var interval = setInterval(function() {
        if (width >= 100) {
            clearInterval(interval);
        } else {
            width++;
            progressBar.style.width = width + "%";
            progressBar.innerHTML = width + "%";
        }
    }, 10); // 10ミリ秒ごとに更新
}