エラー・システム状態
エラー状態
読み込み失敗をその場で伝えるエラーパネル。「再試行」を押すと一瞬スピナーが回り、成功状態へ切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="err" id="errPanel" role="alert" aria-live="assertive">
<div class="err-icon" id="errIcon" aria-hidden="true">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none">
<path d="M12 3L1.5 21h21L12 3Z" stroke="#c0492f" stroke-width="2" stroke-linejoin="round"/>
<line x1="12" y1="10" x2="12" y2="14.5" stroke="#c0492f" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="17.6" r="1.1" fill="#c0492f"/>
</svg>
</div>
<p class="err-msg" id="errMsg">読み込みに失敗しました</p>
<p class="err-sub" id="errSub">通信環境をご確認のうえ、もう一度お試しください。</p>
<button class="err-btn" id="retryBtn">
<span class="err-spinner" id="errSpinner" aria-hidden="true"></span>
<span class="err-label" id="errLabel">再試行</span>
</button>
</div>
</div>