Turbolinks关于特定元素的进度条

Question

我想在我的网站上制作一个加载器，我已经在Middleman静态网站上使用Turbolinks（带有CDNJS，没有宝石）。所以，直接，我想使用Turbolinks进度条，原生在JS中实现。

问题是我想将它应用于SVG rect。我已经开发了它，我可以设置宽度为％，100％我的矩形已满，这意味着它已加载。但我不知道如何在SVG rect上应用Turbolinks Progress Bar宽度。

我没有针对Turbolinks的特定JS或CSS，这是SVG（反应是红色/玫瑰部分，在该点结束时为100％）：

这是SVG代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是我的问题的答案，但我不认为这是最干净的方式。

我的解决方案是在Turbolinks进度条的宽度值上添加一个事件监听器，获取：

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

然后，我只使用这个值，将它添加到SVG rect;当值变化时显示进度条，当值高于100％时隐藏它。