<!-- 3) Ring Progress -->
<div class="fx3-ring" data-speed="2200">
  <span class="fx3-val">0%</span>
</div>

<style>
.fx3-ring{
  --p:0;
  width:110px; height:110px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:
    conic-gradient(#0a84ff calc(var(--p)*1%), #e6e9ef 0);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 1px 0 #fff;
}
.fx3-ring::after{
  content:""; position:absolute; inset:10px; border-radius:50%; background:#fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12);
}
.fx3-val{ font:700 18px/1.1 system-ui, -apple-system, "SF Pro Text"; color:#0a84ff; }
</style>

<script>
(() => {
  const el = document.querySelector('.fx3-ring');
  const spd = parseInt(el.dataset.speed||2200,10);
  let p = 0, t;
  const val = el.querySelector('.fx3-val');
  function step(){
    p = (p+1)%101;
    el.style.setProperty('--p', p);
    val.textContent = p+'%';
    t = setTimeout(step, spd/100);
  }
  step();
  matchMedia('(prefers-reduced-motion: reduce)').addEventListener?.('change', e=>{
    if(e.matches){ clearTimeout(t); }
    else { p=0; step(); }
  });
})();
</script>