カチカチ刻むダイヤルカウンター

<div class="d08-11-12-stage">
          <button class="d08-11-12-dial" type="button" aria-label="ダイヤルを回してカウントアップ">
            <svg viewBox="0 0 60 60" width="56" height="56" aria-hidden="true">
              <circle cx="30" cy="30" r="26" fill="none" stroke="#e2e2e8" stroke-width="4"/>
              <path class="d08-11-12-tick" d="M30 6v8" stroke="#6a5cff" stroke-width="4" stroke-linecap="round"/>
            </svg>
            <span class="d08-11-12-num">0</span>
          </button>
          <span class="d08-11-12-hint">クリックでカチカチ加算</span>
        </div>

.d08-11-12-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-11-12-dial{position:relative;background:none;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center}
        .d08-11-12-tick{transform-origin:30px 30px;transition:transform .18s steps(1,end)}
        .d08-11-12-dial.is-tick .d08-11-12-tick{animation:d08-11-12-kick .18s ease-out}
        @keyframes d08-11-12-kick{0%{stroke:#ff9f43}100%{stroke:#6a5cff}}
        .d08-11-12-num{position:absolute;font-size:16px;font-weight:800;color:#2a2d3a}
        .d08-11-12-hint{font-size:11px;color:#9aa0ad}

(function(){
        var dial=document.querySelector('#item-08-11-12 .d08-11-12-dial');
        var tick=document.querySelector('#item-08-11-12 .d08-11-12-tick');
        var num=document.querySelector('#item-08-11-12 .d08-11-12-num');
        if(!dial||!tick||!num)return;
        var count=0,step=30;
        dial.addEventListener('click',function(){
          count++;
          step+=30;
          tick.style.transform='rotate('+(step%360)+'deg)';
          num.textContent=String(count);
          dial.classList.remove('is-tick');void dial.offsetWidth;dial.classList.add('is-tick');
        });
      })();