체감 성능

<div class="stage">
  <div class="pane"><div class="tag">✗</div>
    <div class="spin" id="sp"></div>
    <div class="loaded" id="l1"><div class="av"></div><div class="ln"></div><div class="ln short"></div></div>
  </div>
  <div class="pane"><div class="tag">✓</div>
    <div class="sk" id="sk"><div class="sk-av"></div><div class="sk-ln"></div><div class="sk-ln short"></div></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 monospace;color:var(--muted)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.spin.hide{display:none}
.loaded{display:none;width:70%;gap:8px}
.loaded.show{display:grid}
@keyframes spin{to{transform:rotate(360deg)}}
.av{width:34px;height:34px;border-radius:50%;background:var(--accent)}
.ln{height:9px;border-radius:4px;background:var(--fg);opacity:.7}
.short{width:60%}
.sk{width:70%;display:grid;gap:8px;grid-template-columns:auto 1fr;align-items:center}
.sk-av{width:34px;height:34px;border-radius:50%;grid-row:span 2;background:linear-gradient(90deg,var(--line) 25%,var(--surface) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.sk-ln{height:9px;border-radius:4px;background:linear-gradient(90deg,var(--line) 25%,var(--surface) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.sk-ln.short{width:60%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

const sp = document.getElementById('sp');
const l1 = document.getElementById('l1');
function run() {
  sp.classList.remove('hide'); l1.classList.remove('show');
  setTimeout(() => { sp.classList.add('hide'); l1.classList.add('show'); }, 2400);
}
run();
setInterval(run, 3400);