如何将Turbolinks进度条宽度应用到SVG rect元素上？

嘿，这事儿不难搞定！既然你已经有了SVG的rect元素，只需要借助Turbolinks提供的原生事件，就能把它的加载进度同步到你的自定义进度条上。下面是一步步的实现方案：

1. 确保Turbolinks正确加载 #

首先确认你已经通过CDN引入了Turbolinks，比如在页面的<head>或者<body>底部添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.min.js"></script>

（注意替换成你实际用的CDN版本号）

2. 准备你的SVG进度条结构 #

假设你的SVG是这样的（可以根据自己的需求调整尺寸、颜色）：

<svg class="custom-turbolinks-progress" viewBox="0 0 100 4" style="display: none;">
  <rect class="progress-bar" x="0" y="0" height="4" width="0%" fill="#2563eb" />
</svg>

给SVG加个默认隐藏的样式，等开始加载时再显示。

3. 用JS监听Turbolinks事件同步进度 #

接下来写一段JavaScript，监听Turbolinks的加载事件，把进度值同步到你的SVG rect上：

// 获取SVG和进度条元素
const progressSvg = document.querySelector('.custom-turbolinks-progress');
const progressBarRect = document.querySelector('.progress-bar');

// 页面开始加载时，显示进度条并重置进度
document.addEventListener('turbolinks:visit-start', () => {
  progressSvg.style.display = 'block';
  progressBarRect.setAttribute('width', '0%');
});

// 监听Turbolinks的进度更新事件，同步进度到rect
document.addEventListener('turbolinks:progress', (event) => {
  // event.detail.progressPercentage 是0-100的数值
  const currentProgress = event.detail.progressPercentage;
  progressBarRect.setAttribute('width', `${currentProgress}%`);
  // 如果你想用style.width也可以：progressBarRect.style.width = `${currentProgress}%`;
});

// 页面加载完成后，隐藏进度条（可以加个小动画提升体验）
document.addEventListener('turbolinks:visit-end', () => {
  // 先让进度条走到100%
  progressBarRect.setAttribute('width', '100%');
  // 延迟300ms再隐藏，让用户看到加载完成的状态
  setTimeout(() => {
    progressSvg.style.display = 'none';
  }, 300);
});

4. 给进度条加样式（可选但推荐） #

为了让进度条固定在页面顶部，不随滚动消失，可以加一点CSS：

.custom-turbolinks-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 9999; /* 确保在所有内容上方 */
}

关键细节说明 #

• Turbolinks的turbolinks:progress事件会在加载过程中持续触发，每次都会携带当前的加载进度百分比（event.detail.progressPercentage），这就是我们需要同步的值。
• 用turbolinks:visit-start和turbolinks:visit-end来控制进度条的显示和隐藏，确保只有在页面切换时才出现。
• 如果你用的是Turbo（Turbolinks的新版本），事件名会变成turbo:visit-start、turbo:progress、turbo:visit-end，只需要把代码里的事件名替换一下就行。

内容的提问来源于stack exchange，提问作者Bastien Robert