スキルアップを始める!

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

JavaScript(ジャバスクリプト)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

プログレスバーを作る

プログレスバーが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ミリ秒ごとに更新
}

まとめ

このコードは基本的な例ですが、プログレスバーをカスタマイズするためにスタイルやアニメーションを調整することができます。

プロジェクトの要件に合わせてカスタマイズしてください。

URLをコピーしました!