로딩 팁

<div class="ltwrap"><div class="ltspin"></div><div class="ltbar"><div class="ltfill" id="ltfill"></div></div><div class="lttip" id="lttip">팁: 달리기 중에도 방어를 유지하려면 생명력을 아난다.</div></div>

.ltwrap{width:min(90%,320px);display:flex;flex-direction:column;align-items:center;gap:10px}
.ltspin{width:clamp(16px,6vmin,24px);height:clamp(16px,6vmin,24px);border-radius:50%;border:3px solid color-mix(in srgb,var(--fg) 15%,transparent);border-top-color:var(--accent);animation:ltspin .8s linear infinite}
@keyframes ltspin{to{transform:rotate(360deg)}}
.ltbar{width:100%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--fg) 12%,transparent);overflow:hidden}
.ltfill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-3));transition:width 2.6s linear}
.lttip{font:clamp(9px,2.8vmin,11px)/1.5 inherit;color:var(--muted);text-align:center;min-height:2.6em;transition:opacity .35s}
.lttip.fading{opacity:0}

const tips=[
  '팁: 달리기 중에도 방어를 유지하려면 생명력을 아난다.',
  '팁: 약한 적부터 앢으리 잡아두면 콤보가 끪기지 않는다.',
  '팁: 상점에서는 생산품을 숫가로 판매하면 더 유리하다.',
  '팁: 보스 전에는 공공재와 물막을 미리 확인하자.',
];
const fill=document.getElementById('ltfill');
const tip=document.getElementById('lttip');
let ti=0;
function loadCycle(){
  fill.style.transition='none';
  fill.style.width='0%';
  requestAnimationFrame(function(){
    fill.style.transition='width 2.6s linear';
    fill.style.width='100%';
  });
}
function rotateTip(){
  tip.classList.add('fading');
  setTimeout(function(){
    ti=(ti+1)%tips.length;
    tip.textContent=tips[ti];
    tip.classList.remove('fading');
  }, 350);
}
loadCycle();
setInterval(loadCycle, 2700);
setInterval(rotateTip, 2100);