順次表示される通知キュー

<div class="stage09-12-08">
          <div class="toast09-12-08">
            <span class="badge09-12-08"></span>
            <span class="tx09-12-08"></span>
          </div>
        </div>

.d09-12-08{ background:#f2f4f8; }
        .d09-12-08 .stage09-12-08{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-08 .toast09-12-08{
          position:absolute; left:16px; right:16px; bottom:16px;
          display:flex; align-items:center; gap:10px;
          background:#fff; border-radius:10px; padding:11px 13px;
          box-shadow:0 10px 24px rgba(20,30,50,.16);
          transform:translateY(120%); opacity:0;
          transition:transform .4s ease, opacity .3s ease;
        }
        .d09-12-08 .toast09-12-08.show09-12-08{ transform:translateY(0); opacity:1; }
        .d09-12-08 .badge09-12-08{
          flex:none; min-width:26px; height:20px; padding:0 6px; border-radius:99px;
          background:#312e81; color:#fff; font-size:10px; font-weight:800;
          display:flex; align-items:center; justify-content:center;
        }
        .d09-12-08 .tx09-12-08{ font-size:11.8px; color:#2b3444; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-08');
        var toast = root.querySelector('.toast09-12-08');
        var badge = root.querySelector('.badge09-12-08');
        var tx = root.querySelector('.tx09-12-08');
        var queue = ['印刷が完了しました','ファイルをアップロードしました','バックアップが完了しました','コメントが承認されました','レポートを生成しました'];
        var i = 0;
        function cycle(){
          toast.classList.remove('show09-12-08');
          setTimeout(function(){
            var n = (i % queue.length) + 1;
            badge.textContent = n + '/' + queue.length;
            tx.textContent = queue[i % queue.length];
            i++;
            void toast.offsetWidth;
            toast.classList.add('show09-12-08');
          }, 300);
        }
        cycle();
        setInterval(cycle, 2200);
      })();