토스트

<div class="app-bg"><div class="bar" style="width:65%"></div><div class="bar" style="width:44%"></div><div class="bar" style="width:80%"></div></div>
<div class="toast" id="tst" role="status" aria-live="polite"><span class="dot"></span>저장되었습니다</div>

.app-bg{position:absolute;inset:0;padding:16px;display:grid;gap:10px;align-content:start}
.bar{height:10px;border-radius:5px;background:var(--line)}
.toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,140%);display:flex;align-items:center;gap:8px;
  background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:12px;font-weight:600;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .32s cubic-bezier(.2,.9,.3,1.2)}
.toast[data-open]{transform:translate(-50%,0)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3, #18c29c)}

const t = document.getElementById('tst');
function loop() {
  t.setAttribute('data-open', '');
  setTimeout(() => { t.removeAttribute('data-open'); setTimeout(loop, 900); }, 2200);
}
loop();