読み込み失敗→リトライ

<div class="d09-03-09-wrap">
          <div class="d09-03-09-state d09-03-09-fail">
            <p class="d09-03-09-msg">読み込みに失敗しました</p>
            <button type="button" class="d09-03-09-retry">再試行</button>
          </div>
          <div class="d09-03-09-state d09-03-09-loading" hidden>
            <span class="d09-03-09-spinner" aria-hidden="true"></span>
            <p class="d09-03-09-txt">読み込み中...</p>
          </div>
          <div class="d09-03-09-state d09-03-09-done" hidden>
            <svg viewBox="0 0 40 40" width="40" height="40" aria-hidden="true"><circle cx="20" cy="20" r="18" fill="#e6f6ec"/><path d="M12 21l5 5 11-12" fill="none" stroke="#2e9e57" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <p class="d09-03-09-txt">コンテンツを表示しました</p>
          </div>
        </div>

.d09-03-09{background:#f7f8fb}
        .d09-03-09-wrap{text-align:center;min-height:110px;display:flex;align-items:center;justify-content:center}
        .d09-03-09-state{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d09-03-09-state[hidden]{display:none}
        .d09-03-09-msg{color:#8a4a4a;font-weight:600;font-size:15px}
        .d09-03-09-retry{padding:9px 24px;border:none;border-radius:999px;background:#4a63c0;color:#fff;font-size:13px;cursor:pointer;transition:background .2s}
        .d09-03-09-retry:hover{background:#33489c}
        .d09-03-09-spinner{width:36px;height:36px;border-radius:50%;border:4px solid #d6dcf0;border-top-color:#4a63c0;animation:d329spin .8s linear infinite}
        @keyframes d329spin{to{transform:rotate(360deg)}}
        .d09-03-09-txt{color:#5a6280;font-size:14px}

(function(){
        var root=document.getElementById('item-09-03-09');if(!root)return;
        var fail=root.querySelector('.d09-03-09-fail'),load=root.querySelector('.d09-03-09-loading'),done=root.querySelector('.d09-03-09-done');
        var btn=root.querySelector('.d09-03-09-retry');
        btn.addEventListener('click',function(){
          fail.hidden=true;load.hidden=false;done.hidden=true;
          setTimeout(function(){
            load.hidden=true;done.hidden=false;
            setTimeout(function(){done.hidden=true;fail.hidden=false;},2200);
          },1400);
        });
      })();