• progress要素を使用する方法
• divとCSSを使ったカスタムプログレスバー
• SVGを使ったプログレスバー
• Canvasを使ったプログレスバー
• JavaScriptで動的に更新する方法

progress要素を使用する方法

HTML5にはプログレスバーを簡単に作成できる<progress>要素が用意されています。

<progress value="50" max="100"></progress>

上記のコードは50%の進捗を表すプログレスバーを表示します。value属性に現在の値を、max属性に最大値を指定します。

動的な更新

JavaScriptを使って値を更新できます。

        <progress id="progressBar" value="20" max="100"></progress>
        <button onclick="updateProgress()">進捗を増やす</button>

        <script>
            function updateProgress() {
                let progressBar = document.getElementById("progressBar");
                if (progressBar.value < 100) {
                    progressBar.value += 10;
                }
            }
        </script>
    

divとCSSを使ったカスタムプログレスバー

<progress>要素はシンプルですが、デザインの自由度が低いため、<div>とCSSを使ってカスタムプログレスバーを作ることもできます。

        <div style="width: 300px; background: #ddd; border: 1px solid #000;">
            <div id="customProgress" style="width: 50%; background: blue; height: 20px;"></div>
        </div>
    

JavaScriptで更新

        <script>
            function increaseProgress() {
                let bar = document.getElementById("customProgress");
                let currentWidth = parseInt(bar.style.width);
                if (currentWidth < 100) {
                    bar.style.width = (currentWidth + 10) + "%";
                }
            }
        </script>
    

ボタンで更新可能にするには以下を追加します。

<button onclick="increaseProgress()">進捗を増やす</button>

SVGを使ったプログレスバー

SVGを使うと円形のプログレスバーを作ることができます。

        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="gray" stroke-width="5" fill="none"/>
            <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="5" fill="none" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
        </svg>
    

Canvasを使ったプログレスバー

Canvasを使用して円形の進捗バーを描画することも可能です。

        <canvas id="progressCanvas" width="100" height="100"></canvas>
        <script>
            function drawProgress(percentage) {
                let canvas = document.getElementById("progressCanvas");
                let ctx = canvas.getContext("2d");

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.beginPath();
                ctx.arc(50, 50, 40, Math.PI * 1.5, Math.PI * (1.5 + 2 * (percentage / 100)), false);
                ctx.lineWidth = 5;
                ctx.strokeStyle = "blue";
                ctx.stroke();
            }

            drawProgress(50);
        </script>
    

JavaScriptで動的に更新する方法

進捗状況をリアルタイムで変更する場合は、JavaScriptを活用できます。

        <progress id="jsProgress" value="0" max="100"></progress>
        <button onclick="startProgress()">進行開始</button>

        <script>
            function startProgress() {
                let progressBar = document.getElementById("jsProgress");
                let value = 0;
                let interval = setInterval(function () {
                    if (value >= 100) {
                        clearInterval(interval);
                    } else {
                        value += 5;
                        progressBar.value = value;
                    }
                }, 500);
            }
        </script>