.gauge{--size:200px;--cutout:50%;--color:lime;--background:white;--value:.1;width:var(--size);height:var(--size);border-radius:calc(var(--size)/2);background:radial-gradient(var(--background)0 var(--cutout),transparent var(--cutout)100%),conic-gradient(from -135deg,var(--color)calc(270deg*var(--value)),gray calc(270deg*var(--value))270deg,transparent 270deg);text-align:center;font-size:28pt;line-height:var(--size)}
.base{--value:0;--color:lime;--thickness:20px;background-color:gray;position:relative}.vertical{width:var(--thickness);flex-direction:column-reverse;justify-content:flex-start;height:100%;display:flex}.horizontal{width:100%;height:var(--thickness)}.horizontal>.inner{background-color:var(--color);height:100%}.vertical>.inner{background-color:var(--color);width:100%}.vertical>.inner.centered{position:relative}.horizontal>.inner.centered{position:relative;left:50%}.label{left:25px;top:calc(50% - var(--value)*50%);position:absolute;transform:translateY(-50%)}