パーツ番号 02-17-28 ・ JavaScript使用

プログレス接続見出しセット

ボタンを押すと、h2からh4を縦につなぐ進捗バーが上から下へ伸び、通過したレベルのマーカーが順に点灯する。見出しそのものが手続きの進み具合を示すため、契約フローの案内ページに実用的な動きを足せる。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-17-28-stage">
          <div class="set">
            <p class="lv2">お申し込みの流れ</p>
            <p class="lv3">ヒアリングシートの記入</p>
            <p class="lv4">ご契約手続き</p>
          </div>
          <button type="button" class="d02-17-28-btn">クリックで進捗を再生</button>
        </div>

CSS

.d02-17-28 .d02-17-28-stage{ width:100%; }
        .d02-17-28 .set{ width:100%; position:relative; padding-left:22px; display:flex; flex-direction:column; gap:18px; }
        .d02-17-28 .set::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:#c7d2fe; }
        .d02-17-28 .set::after{ content:""; position:absolute; left:5px; top:6px; width:2px; height:0; background:#4f46e5; transition:height 1.6s linear; }
        .d02-17-28 .set.d02-17-28-run::after{ height:calc(100% - 12px); }
        .d02-17-28 .lv2,.d02-17-28 .lv3,.d02-17-28 .lv4{ position:relative; margin:0; }
        .d02-17-28 .lv2::before,.d02-17-28 .lv3::before,.d02-17-28 .lv4::before{ content:""; position:absolute; left:-22px; top:.55em; width:10px; height:10px; border-radius:50%; background:#e0e7ff; transition:background .3s ease; }
        .d02-17-28 .lv2{ font-size:21px; font-weight:800; color:#312e81; }
        .d02-17-28 .lv3{ font-size:16px; font-weight:700; color:#3730a3; }
        .d02-17-28 .lv4{ font-size:14px; font-weight:700; color:#64748b; }
        .d02-17-28 .set.d02-17-28-run .lv2::before{ background:#4f46e5; transition-delay:.1s; }
        .d02-17-28 .set.d02-17-28-run .lv3::before{ background:#4f46e5; transition-delay:.8s; }
        .d02-17-28 .set.d02-17-28-run .lv4::before{ background:#4f46e5; transition-delay:1.5s; }
        .d02-17-28 .d02-17-28-btn{ display:block; margin:16px auto 0; padding:8px 18px; font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; background:#4338ca; border:none; border-radius:20px; cursor:pointer; }

JavaScript

(function(){
        var set = document.querySelector('#item-02-17-28 .set');
        var btn = document.querySelector('#item-02-17-28 .d02-17-28-btn');
        if(!set || !btn) return;
        btn.addEventListener('click', function(){
          set.classList.remove('d02-17-28-run');
          void set.offsetWidth;
          set.classList.add('d02-17-28-run');
        });
      })();

クラス名 .d02-17-28 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。