← 動的パーツギャラリーへ戻る

パーツ番号 10-06-10 ・ JavaScript使用

停止・再生成ボタン付き応答完了演出

応答完了後に「停止」ボタンが「再生成」ボタンへ切り替わる演出。AIチャットの応答操作UIに使えます。

js

プレビュー

ソースコード

HTML

<div class="d10-06-10-wrap">
          <p class="d10-06-10-status">回答を生成しています…</p>
          <button type="button" class="d10-06-10-btn">
            <span class="d10-06-10-btn-icon"></span>
            <span class="d10-06-10-btn-label">停止</span>
          </button>
        </div>

CSS

.d10-06-10 .d10-06-10-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d10-06-10 .d10-06-10-status{margin:0;font-size:12.5px;color:#4b5563}
        .d10-06-10 .d10-06-10-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid #d1d5db;background:#fff;font-size:12px;font-weight:600;color:#374151;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
        .d10-06-10 .d10-06-10-btn-icon{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center}
        .d10-06-10 .d10-06-10-btn.is-done{border-color:#6366f1;color:#4f46e5}

JavaScript

(function(){
          var root = document.currentScript.closest('.item');
          var status = root.querySelector('.d10-06-10-status');
          var btn = root.querySelector('.d10-06-10-btn');
          var icon = root.querySelector('.d10-06-10-btn-icon');
          var label = root.querySelector('.d10-06-10-btn-label');
          var stopIcon = '<svg viewBox="0 0 24 24" width="10" height="10" fill="#374151"><rect x="5" y="5" width="14" height="14" rx="2"/></svg>';
          var reloadIcon = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#4f46e5" stroke-width="2.2" stroke-linecap="round"><path d="M4 4v6h6M20 20v-6h-6"/><path d="M5 14a8 8 0 0 0 14.6 3M19 10A8 8 0 0 0 4.4 7"/></svg>';
          function loop(){
            status.textContent = '回答を生成しています…';
            icon.innerHTML = stopIcon;
            label.textContent = '停止';
            btn.classList.remove('is-done');
            setTimeout(function(){
              status.textContent = '回答が完了しました';
              icon.innerHTML = reloadIcon;
              label.textContent = '再生成';
              btn.classList.add('is-done');
              setTimeout(loop, 2600);
            }, 2400);
          }
          loop();
        })();

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