パーツ番号 09-03-11 ・ JavaScript使用

429レート制限クールダウン

カウントダウン秒数と進捗バーが自動で減少していくアクセス過多エラー画面です。WordPressのAPI呼び出し過多やお問い合わせフォームの連投防止表示に使えます。

autojsinput

プレビュー

ソースコード

HTML

<div class="d09-03-11-wrap">
          <p class="d09-03-11-num">429</p>
          <p class="d09-03-11-msg">アクセスが集中しています</p>
          <p class="d09-03-11-sub"><span id="d09-03-11-count">10</span>秒後に自動で再試行します</p>
          <div class="d09-03-11-bar"><span class="d09-03-11-fill" id="d09-03-11-fill"></span></div>
        </div>

CSS

.prev.d09-03-11{background:#f7f8fb}
        .d09-03-11-wrap{text-align:center;width:100%;max-width:260px}
        .d09-03-11-num{margin:0;font-size:44px;font-weight:800;color:#c58a2a;letter-spacing:.04em}
        .d09-03-11-msg{margin:6px 0 4px;font-weight:700;color:#5a4326;font-size:15px}
        .d09-03-11-sub{margin:0 0 14px;font-size:12px;color:#8a7b5c}
        .d09-03-11-bar{height:6px;border-radius:4px;background:#eee3cf;overflow:hidden}
        .d09-03-11-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f0a94a,#c58a2a)}

JavaScript

(function(){
        var root=document.querySelector('#item-09-03-11');if(!root)return;
        var countEl=root.querySelector('#d09-03-11-count'),fill=root.querySelector('#d09-03-11-fill');
        var total=10,cur=total;
        var timer=setInterval(function(){
          cur--;
          if(cur<=0){cur=total;}
          countEl.textContent=cur;
          fill.style.width=(cur/total*100)+'%';
        },1000);
      })();

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