SVG masked progress bar

Question

Can someone mastered in SVG help me with creating that simple progress bar where the blue color is moving according to a percentage? I tried but with no luck or can be simpler.

Answer 1

Just for the POC purpose, I have added SVG code directly into the HTML. You can create a path group of vertical bars and put the filling object right behind that group. I have added simple animation to show the working animation. Please let me know if I have missed anything.

function loadAnim() {
        window.onload = function () {
          let xval = 100;
          setInterval(() => {
            if (xval <= 0) {
              return 0;
            } else {
              document.getElementById('progress').setAttribute('x', '0');
            }
          }, 1000);
        };
      }
      loadAnim();

rect#progress {
        transition: all 0.9s linear;
      }

<svg
      version="1.1"
      id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 79 20"
      style="enable-background: new 0 0 79 20"
      xml:space="preserve"
    >
      <rect x="0" y="0" style="fill: #adadad" width="79" height="20" />
      <rect
        id="progress"
        x="-79"
        y="0"
        style="fill: #0077d8"
        width="79"
        height="20"
      />
      <g>
        <path
          style="fill: #ffffff"
          d="M15,18.5v-17C15,0.7,15.7,0,16.5,0h-4C13.3,0,14,0.7,14,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C15.7,20,15,19.3,15,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M20,18.5v-17C20,0.7,20.7,0,21.5,0h-4C18.3,0,19,0.7,19,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C20.7,20,20,19.3,20,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M35,18.5v-17C35,0.7,35.7,0,36.5,0h-4C33.3,0,34,0.7,34,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C35.7,20,35,19.3,35,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M25,18.5v-17C25,0.7,25.7,0,26.5,0h-4C23.3,0,24,0.7,24,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C25.7,20,25,19.3,25,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M30,18.5v-17C30,0.7,30.7,0,31.5,0h-4C28.3,0,29,0.7,29,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C30.7,20,30,19.3,30,18.5z"
        />
        <path style="fill: #ffffff" d="M0,18.5V20h1.5C0.7,20,0,19.3,0,18.5z" />
        <path
          style="fill: #ffffff"
          d="M10,18.5v-17C10,0.7,10.7,0,11.5,0h-4C8.3,0,9,0.7,9,1.5v17C9,19.3,8.3,20,7.5,20h4
        C10.7,20,10,19.3,10,18.5z"
        />
        <path style="fill: #ffffff" d="M1.5,0H0v1.5C0,0.7,0.7,0,1.5,0z" />
        <path
          style="fill: #ffffff"
          d="M5,18.5v-17C5,0.7,5.7,0,6.5,0h-4C3.3,0,4,0.7,4,1.5v17C4,19.3,3.3,20,2.5,20h4
        C5.7,20,5,19.3,5,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M65,18.5v-17C65,0.7,65.7,0,66.5,0h-4C63.3,0,64,0.7,64,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C65.7,20,65,19.3,65,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M77.5,20H79v-1.5C79,19.3,78.3,20,77.5,20z"
        />
        <path
          style="fill: #ffffff"
          d="M75,18.5v-17C75,0.7,75.7,0,76.5,0h-4C73.3,0,74,0.7,74,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C75.7,20,75,19.3,75,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M70,18.5v-17C70,0.7,70.7,0,71.5,0h-4C68.3,0,69,0.7,69,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C70.7,20,70,19.3,70,18.5z"
        />
        <path style="fill: #ffffff" d="M77.5,0C78.3,0,79,0.7,79,1.5V0H77.5z" />
        <path
          style="fill: #ffffff"
          d="M50,18.5v-17C50,0.7,50.7,0,51.5,0h-4C48.3,0,49,0.7,49,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C50.7,20,50,19.3,50,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M60,18.5v-17C60,0.7,60.7,0,61.5,0h-4C58.3,0,59,0.7,59,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C60.7,20,60,19.3,60,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M45,18.5v-17C45,0.7,45.7,0,46.5,0h-4C43.3,0,44,0.7,44,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C45.7,20,45,19.3,45,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M40,18.5v-17C40,0.7,40.7,0,41.5,0h-4C38.3,0,39,0.7,39,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C40.7,20,40,19.3,40,18.5z"
        />
        <path
          style="fill: #ffffff"
          d="M55,18.5v-17C55,0.7,55.7,0,56.5,0h-4C53.3,0,54,0.7,54,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
        C55.7,20,55,19.3,55,18.5z"
        />
      </g>
    </svg>