Glowing Ring Progress Knob

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="ring-knob"><svg class="ring-svg"><circle cx="40" cy="40" r="32" class="ring-bg"></circle><circle cx="40" cy="40" r="32" class="ring-fill"></circle></svg><div class="ring-text">75%</div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.ring-knob { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.ring-svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #27272a; stroke-width: 6; }
.ring-fill { fill: none; stroke: #a855f7; stroke-width: 6; stroke-dasharray: 201; stroke-dashoffset: 50; stroke-linecap: round; filter: drop-shadow(0 0 4px #a855f7); }
.ring-text { position: absolute; font-family: system-ui; font-size: 11px; font-weight: 700; color: #fff; }