Design Atlas
한국어
◆ Game UI & game feel

Loading Tips

로딩 팁

Gameplay tips that rotate every few seconds beneath a filling progress bar, giving the wait something to do besides just watching a bar.

Also known as: 로딩 화면 힌트Loading screen hints로딩 문구
···
html
<div class="ltwrap"><div class="ltspin"></div><div class="ltbar"><div class="ltfill" id="ltfill"></div></div><div class="lttip" id="lttip">팁: 달리기 중에도 방어를 유지하려면 생명력을 아난다.</div></div>
css
.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}
js
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);

Loading tips do two things at once: a progress bar (or spinner) tracking actual load progress, and rotating text giving the wait something to read. Tips crossfading every few seconds is a classic perceived-performance trick — the actual load time doesn't change, but the sense of "I was doing something while waiting" offsets the boredom.

The bar doesn't have to track real progress precisely (asset loading is hard to predict) — but it shouldn't look frozen either, so a low-effort continuous motion (a striped animation, for instance) is common even when true progress is unknown.

Tip content should actually be useful or interesting — controls, strategy, a sliver of lore. Generic or repeated tips just reinforce the feeling that the load is taking too long.

When to use

Loading or transition screens that take more than a few seconds. Unnecessary for instant transitions.