옵티미스틱 UI

<div class="stage">
  <div class="pane"><div class="tag">✗</div>
    <button class="like" id="b1"><span class="ic">♥</span></button>
    <div class="spin" id="s1"></div>
  </div>
  <div class="pane"><div class="tag">✓</div>
    <button class="like" id="b2"><span class="ic">♥</span></button>
    <div class="check" id="s2">✓</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;gap:10px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 12px/1 monospace;color:var(--muted)}
.like{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center}
.ic{font-size:22px;color:var(--muted);transition:color .1s}
.like.on .ic{color:var(--accent-2)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);opacity:0}
.spin.show{opacity:1;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.check{font:700 14px/1 monospace;color:var(--accent-3);opacity:0}
.check.show{opacity:1}

const b1 = document.getElementById('b1'), s1 = document.getElementById('s1');
const b2 = document.getElementById('b2'), s2 = document.getElementById('s2');
function cycleSlow() {
  s1.classList.add('show');
  setTimeout(() => { b1.classList.add('on'); s1.classList.remove('show'); }, 1300);
  setTimeout(() => { b1.classList.remove('on'); }, 2600);
}
function cycleFast() {
  b2.classList.add('on');
  setTimeout(() => { s2.classList.add('show'); }, 120);
  setTimeout(() => { s2.classList.remove('show'); }, 900);
  setTimeout(() => { b2.classList.remove('on'); }, 2600);
}
cycleSlow(); cycleFast();
setInterval(() => { cycleSlow(); cycleFast(); }, 3000);