パーツ番号 10-06-10 ・ JavaScript使用
停止・再生成ボタン付き応答完了演出
応答完了後に「停止」ボタンが「再生成」ボタンへ切り替わる演出。AIチャットの応答操作UIに使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。