看起来很棒，David！有个小建议：能否让进度条持续运行（也许放慢速度），而不是在等待响应时在中间暂停？比如，从 40% 到 70% 可以走慢一些，如果仍然没有响应再暂停？
隐藏这个短暂的停顿，在我看来会让整体感觉更灵敏、更即时。
1 个赞
目前，它似乎会在停止前以较慢的速度运行 5 秒，然后在 80% 的宽度处停止。
在这里，我模拟了一个非常、非常慢的互联网连接：
当前的 SCSS：
.loading-indicator-container {
--loading-duration: 5s;
--loading-function: cubic-bezier(0, 0, 0, 1);
--done-duration: 0.4s;
--done-function: ease;
--fade-out-duration: 0.4s;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 3px;
width: 100%;
opacity: 0;
transition: opacity var(--fade-out-duration) ease var(--done-duration);
background-color: var(--primary-low);
}
.loading-indicator-container .loading-indicator {
height: 100%;
width: 100%;
width: 0%;
background-color: var(--tertiary);
}
.loading-indicator-container.loading {
opacity: 1;
transition: opacity 0s;
}
.loading-indicator-container.loading .loading-indicator {
transition: width var(--loading-duration) var(--loading-function);
width: 80%;
}
.loading-indicator-container.done .loading-indicator {
transition: width var(--done-duration) var(--done-function);
width: 100%;
}
body.discourse-hub-webview .loading-indicator-container {
top: 1px;
}
body.footer-nav-ipad .loading-indicator-container {
top: 49px;
}
body.loading #main-outlet {
opacity: 0.2;
transition: opacity 0.2s ease;
}
3 个赞
嗯，对我来说它会在大约 40% 处卡住，但我觉得即使移动条慢一些，也比停顿要好。
另外，关于淡入淡出效果——也许将旧内容淡出、新内容淡入会显得更快（如果可以对加载路由的出口进行定位的话）？
3 个赞
有两件事正在发生……
@Canapin 说得对，初始动画在 5 秒时结束，进度停留在 80%……所以在慢速连接下，它会卡在那里，直到你进入下一页才会完成。
@P16 遇到的情况则是我在较快连接下体验到的……一旦从当前页面开始切换，动画会暂时停留在它所在位置……一秒钟后在新页面上继续（这里我放大了进度条的高度以便观察）。
我同意保持一定的持续运动是理想的，但如果不彻底改变实现方式，这可能无法实现……
我认为淡入效果帮助不大……在内容加载完成之前无法进行淡入，因此这样做实际上会稍微延迟内容的出现。我猜它可能会营造出一种速度更快的错觉，但从技术上讲，它会比实际慢上淡入动画所花费的时间！
我刚刚意识到，你可以通过目录组件来测试淡入效果（因为它会淡入帖子内容），例如：访问 https://meta.discourse.org/t/postgresql-13-update/172563。我觉得这并没有让人感觉特别快……但它确实显得更加“柔和”。
11 个赞
哦，我认为这是因为内容确实已加载，但在 HTML 解析/样式级联/布局/渲染过程中出现了较大的卡顿，导致动画无法移动。
3 个赞
.loading-indicator-container .loading-indicator, .loading-indicator-container {
background-color:#FFCC00;
}
我尝试在主题 CSS 中更改颜色，但它仍然显示为蓝色。有什么帮助吗？
1 个赞
没错。JS / DOM 渲染的单线程特性意味着，在渲染主题时我们会丢失大量帧 
。滑块实际上一直在“移动”，只是帧从未被渲染出来。
谢谢。我刚刚在 核心代码 中修复了这个问题，Meta 站点上很快也会生效。
我今天会在 Meta 上实现淡入效果，这样我们就能看看感觉如何。不过显然，如果我们这样做，就需要移除其他淡入效果，比如目录组件。
编辑：已完成。Meta 站点已启用淡入效果。
这取决于你的主题/组件的加载顺序，那样可能不起作用。你需要让选择器比加载指示器组件的 CSS “更具体”。最简单的方法可能是给 background-color 添加 !important。你还应该移除 container 选择器，否则背景色会和前景色相同：
.loading-indicator-container .loading-indicator {
background-color:#FFCC00 !important;
}
7 个赞
谢谢 David，看起来很棒！
1 个赞
现在系统会取最近 5 次页面加载的平均耗时，并据此设置进度条的速度。
18 个赞
你好 David，
这个加载器越来越棒了 
请继续保持出色的工作。
有了这次更新，看起来更加动态了
我刚刚注意到在分类页面中有一个问题。我使用了“创建主题”按钮的重命名功能。
在使用加载滑块时，按钮文本不会刷新。我注意到这一点是因为它可能会与其他脚本产生冲突。
演示（在这个视频中，我点击了一个具有自定义“创建主题”文本的分类，然后切换到另一个具有默认“创建主题”按钮的分类。）在我刷新整个页面后，才显示正确的文本。
3 个赞
淡入/淡出效果有所改进。但我仍然觉得滑块是个干扰。我会不自觉地盯着它看，导致页面加载时，我准备好阅读的速度变慢了。而使用加载图标时，它固定在同一个位置，很容易忽略；而且它的突然出现让我联想到速度（也许这种联想并不准确）。
也许在网速较慢的情况下，滑块会更好，因为你能直观感受到页面加载的快慢。这一点我也不太确定。
4 个赞
对我来说，使用手机时，滑块位于屏幕顶部，而旧版滑块则位于屏幕中部偏上，大约距离顶部30%的位置……
这样一来，用户无需将视线一直集中在手机中心，而是需要上下移动视线……这只是我的一点个人看法……
5 个赞
我同意这一点。我认为“加载滑块”仅在桌面端工作，而在移动端保留旋转加载图标会更好。旋转图标在移动端使用时更有应用的感觉，就像 YouTube 使用加载器一样。
4 个赞
是的，我一直在 iPhone 上使用，所以我的评论确实主要针对移动端。
4 个赞
很喜欢这个概念。我一直是滑动条优于旋转加载器的粉丝。
我在多种主题（Dark、Alien、Vincent、Star Wars 等）上启用并测试了该功能，测试设备包括 27 英寸和 34 英寸的 ROG 显示器。但几乎看不到加载滑动条，它看起来非常细。在“深色”主题下，这条细线的颜色过于柔和，难以察觉。
我也在移动设备上测试了滑动条，设备为 iPhone 6s 和 iPhone 6+，情况类似，几乎难以注意到。
我不想做个扫兴的人，但客观来说，这个滑动条很有潜力，但需要额外的 CSS 调整（在我看来）。因此，我们暂时在网站上改回了旋转加载器，因为它更醒目，能清晰地传达“正在重新加载”的信息。等我有时间后，会再次启用它，并为我们的网站优化 CSS，因为它看起来真的很有前景！
看起来非常有潜力！
谢谢，并继续保持良好的工作！
附言：没有速度问题。我连接的是（刚离开）国家光纤骨干网，通过专用光纤接入主骨干网。
5 个赞
我只是想提一下，我并不太喜欢在选择类别、主题等时出现的新 UX 行为：在新页面加载之前，当前视图会变淡。我认为旧的做法——直接显示一个带加载转圈的空白页面——体验要好得多。
无论哪种方式，页面实际上都会变化两次。但由于加载转圈是通用的，用户并不会真正感觉页面变了两次，只觉得它正在准备变化，然后一次性完成变化。而现在，由于两次过渡后仍然有内容（一次是变淡后的内容，一次是新页面内容），用户会感觉页面变了两次。很难确切说明为什么我不喜欢它，但我觉得这是因为不再有一个通用的加载视图。现在实际上有无数种不同的加载视图，而“先变淡再加载”的方式让我觉得分心，因为每次切换到新页面时，背景内容都不同。
4 个赞
一些使用 didInsertElement 钩子的功能确实需要更新。在旧的加载器中，页面上的所有元素都会被销毁并重新创建。而在这个新系统中，Ember 会尽可能复用元素。这可能实际上会让渲染稍微快一些，但如果自定义代码没有遵循常规的 Ember 模式，也可能会引发一些 bug。我们将需要逐一排查并修复这些问题。
你的自定义代码是否托管在可以分享的 Git 仓库中？
这正是我想将其作为主题组件再实验一段时间的主要原因——这样我们就能在将其移入核心之前尽可能多地发现并解决问题。
6 个赞
好的，这是仓库链接。谢谢
4 个赞
我认为这个新功能在移动设备上存在一个 Bug（至少在 iPhone 上）。如果在导航下拉菜单中选择“最新”，页面加载时下拉菜单会正常消失。但如果选择“新”或“未读”（可能还有其他选项），下拉菜单仍然可见。这种情况并非每次都会发生，但出现的频率足以轻松复现。请注意，旧版本中偶尔也会出现此问题，但仅限于“最新”选项，从未在“新”或“未读”选项中出现过。
5 个赞
谢谢 @Don，我试了一下，觉得这样做更好，应该能配合新的滑块使用：https://github.com/VaperinaDEV/category-btn-name/pull/1（如果匈牙利语部分有出错请见谅）。这种模式对其他需要更新组件的人也会很有用（使用计算属性而不是 didInsertElement 和 JQuery）。
已加入我的待查清单，谢谢。
8 个赞