プログレスバーを設置してフォーム内での進行状況を可視化する

2023年12月5日

setInterval() を使用したプログレスバーの設定方法

フォーム内で進行状況バーまたはステップインジケーターを使うと、特に長いフォームや複数のステップがある場合、ユーザーが現在の位置と残りのステップを簡単に理解できます。これにより、ユーザーの不安や混乱が減り、フォームを途中で離脱することが少なくなります。また、進行状況の可視化はユーザーに達成感を与え、全体的な体験を向上させます。

入力フォーム上でプログレスバーを表示し、ユーザーに現在の進行状況や読み込み状態を視覚的に示しましょう。JavaScriptのsetInterval()関数を活用することで、動的かつ連続的なプログレスバーを実装できます。
setInterval()は、指定された時間間隔ごとに関数を繰り返し実行するJavaScriptの関数です。この機能を用いて、プログレスバーの進捗を定期的に更新することが可能です。

プログレスバーの実装

プログレスバーはHTMLとCSSで構築し、JavaScriptで制御します。HTMLではバーのコンテナとバー自体を定義し、CSSでスタイリングを行います。JavaScriptではsetInterval()を使用して、バーの幅を時間経過と共に増やすことで進捗を示します。

setInterval() を使用したプログレスバーの基本的なコード例

HTMLでプログレスバーの構造を作り、CSSでスタイリングし、JavaScriptで進捗を制御します。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress Bar Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS:


#progress-container {
    width: 100%;
    background-color: #ddd;
}

#progress-bar {
    width: 0%;
    height: 20px;
    background-color: #4CAF50;
}

JavaScript:


let width = 0;
const progressBar = document.getElementById('progress-bar');

const interval = setInterval(function() {
    width++;
    progressBar.style.width = width + '%';

    if (width >= 100) {
        clearInterval(interval);
    }
}, 100); // 100ミリ秒ごとに幅を1%増やす

このコードでは、プログレスバーの幅が0%から始まり、100ミリ秒ごとに1%ずつ増加します。プログレスバーが100%に達した時点で、setInterval()は停止します。

▼効果が出やすいABテスト箇所のリスト