홀드

<div class="rows">
  <div class="row">
    <span class="tag">No hold</span>
    <div class="track"><i class="ball nohold"></i></div>
  </div>
  <div class="row">
    <span class="tag">Hold</span>
    <div class="track"><i class="ball hold"><i class="ring"></i></i></div>
  </div>
</div>

.rows{position:absolute;inset:14% 6%;display:flex;flex-direction:column;justify-content:space-around}
.row{display:flex;flex-direction:column;gap:8px}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:26px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.ball{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--accent)}
.nohold{animation:noHold 2.2s ease-in-out infinite}
.hold{background:var(--accent-3);animation:withHold 2.2s ease-in-out infinite}
.ring{position:absolute;inset:-6px;border:2px solid var(--accent-2);border-radius:50%;opacity:0;animation:ringPulse 2.2s steps(1) infinite}
@keyframes noHold{0%{left:6%}50%{left:calc(94% - 22px)}100%{left:6%}}
@keyframes withHold{
  0%{left:6%}
  18%{left:calc(46% - 11px)}
  42%{left:calc(46% - 11px)}
  60%{left:calc(94% - 22px)}
  84%{left:calc(94% - 22px)}
  100%{left:6%}
}
@keyframes ringPulse{
  0%,18%{opacity:0}
  18.1%,42%{opacity:1}
  42.1%,60%{opacity:0}
  60.1%,84%{opacity:1}
  84.1%,100%{opacity:0}
}