Turbolinks Progress Bar on specific element

I want to make a loader on my website and I'm already using Turbolinks (with CDNJS, without gems, on a Middleman static website). So, directly, I thought to use the Turbolinks progress bar, natively implemented in the JS.

The problem is I want to apply it on a SVG rect. I already develop it, I can set a width in %, at 100% my rect is full so it means it's loaded. But I don't know how I could apply the Turbolinks Progress Bar width on my SVG rect.

I don't have specific JS or CSS for Turbolinks, and this is the SVG (the react is the red/rose part, at 100% it's at the end of the point):

And here is the SVG code:

#progress {
  x: 0;
  width: 70%;
}

<div id="loader">
  <svg width="419px" height="110px" viewBox="0 0 419 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Rectangle</title>
    <desc>Created with Sketch.</desc>
    <defs>
      <path d="M56.953125,28.6015625 C76.078125,28.6015625 86.203125,38.4453125 86.203125,58.203125 L86.203125,107 L56.7421875,107 L56.7421875,62.3515625 C56.7421875,52.4375 51.890625,49.5546875 45.3515625,49.5546875 C39.3046875,49.5546875 30.375,52.0859375 30.234375,66.8515625 L30.234375,107 L0.7734375,107 L0.7734375,0.1953125 L30.234375,0.1953125 L30.234375,38.7265625 C36.28125,32.46875 45.421875,28.6015625 56.953125,28.6015625 Z M181.125,67.6953125 L180.84375,73.8125 L126.421875,73.8125 C127.335938,83.375 133.59375,87.9453125 141.539062,87.9453125 C147.585938,87.9453125 151.804688,85.4140625 153.632812,79.7890625 L180.421875,82.8828125 C175.710938,99.40625 160.804688,108.476562 141.679688,108.476562 C114.398438,108.476562 97.875,93.921875 97.875,68.609375 C97.875,43.15625 115.03125,28.4609375 140.695312,28.4609375 C163.617188,28.4609375 180.984375,40.0625 181.125,67.6953125 Z M140.835938,47.1640625 C133.03125,47.1640625 128.390625,49.90625 126.914062,57.640625 L153.210938,57.640625 C152.296875,50.5390625 147.304688,47.1640625 140.835938,47.1640625 Z M194.90625,107 L194.90625,0.1953125 L224.367188,0.1953125 L224.367188,107 L194.90625,107 Z M243.914062,107 L243.914062,0.1953125 L273.375,0.1953125 L273.375,107 L243.914062,107 Z M331.171875,108.476562 C304.875,108.476562 286.523438,93.921875 286.523438,68.46875 C286.523438,43.15625 304.734375,28.6015625 331.171875,28.6015625 C358.03125,28.6015625 376.03125,43.15625 376.03125,68.46875 C376.03125,93.921875 357.890625,108.476562 331.171875,108.476562 Z M330.890625,87.8046875 C341.15625,87.8046875 347.273438,79.9296875 347.273438,68.46875 C347.273438,57.0078125 341.15625,49.1328125 330.890625,49.1328125 C321.1875,49.1328125 315.351562,57.0078125 315.351562,68.46875 C315.351562,79.9296875 321.1875,87.8046875 330.890625,87.8046875 Z M403.664062,108.476562 C395.929688,108.476562 389.390625,101.9375 389.390625,94.203125 C389.390625,86.328125 395.929688,79.7890625 403.664062,79.7890625 C411.539062,79.7890625 418.078125,86.328125 418.078125,94.203125 C418.078125,101.9375 411.539062,108.476562 403.664062,108.476562 Z" id="path-1"></path>
    </defs>
    <g id="chargement-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -377.000000)">
      <g id="Rectangle" transform="translate(145.000000, 378.000000)">
        <mask id="mask-2" fill="white">
          <use xlink:href="#path-1"></use>
        </mask>
        <use id="Mask" stroke="#C1EDF5" stroke-width="0.5" fill-opacity="0" fill="#FFFFFF" xlink:href="#path-1"></use>
        <rect id="progress" fill="#EA4C64" mask="url(#mask-2)" x="128" y="-121" height="338"></rect>
      </g>
    </g>
  </svg>
</div>

Solution

This is an answer to my question, but I don't think it's the cleanest way.

My solution is to add an event listener on the width value of the Turbolinks progress bar, gettingit with:

window.getComputedStyle(document.getElementsByClassName('turbolinks-progress-bar')[0]).width

Then, I just use this value, add it on the SVG rect ; showing the progress bar when the value change and hiding it when the value is higher than 100%.