.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%)}