# 加载滑块为Spinner

**URL:** https://meta.discourse.org/t/loading-slider-to-spinner/281207
**Category:** Theme component
**Created:** [2023年十月5日 20:19 UTC](https://meta.discourse.org/t/loading-slider-to-spinner/281207 "2023-10-05T20:19:58Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2023年十月5日 20:19 UTC](https://meta.discourse.org/t/loading-slider-to-spinner/281207/1 "2023-10-05T20:19:59Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **摘要** | 此主题组件将加载滑块转换为加载指示器。 |
| 👓 | **预览** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/loading-slider-to-spinner) |
| 🛠 | **仓库** | [GitHub - VaperinaDEV/loading-slider-to-spinner: This theme component convert the loading slider to spinner.](https://github.com/VaperinaDEV/loading-slider-to-spinner) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **首次使用 Discourse 主题？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

安装此主题组件

你好 👋

一些成员提到他们希望保留加载指示器。此主题组件将加载滑块转换为加载指示器。由于这主要是一个视觉问题， ~~我用 CSS 重塑了滑块使其成为加载指示器~~ 我隐藏了滑块，并在伪元素之前将加载指示器添加到 `#main-outlet-wrapper`，这样它就不会与插件插槽冲突。因此，它保留了滑块的功能，并有望解决加载指示器使用中出现的错误。

我在加载页面时隐藏了 `#main-outlet`、用户菜单和模态框，就像加载指示器一样。

我使用 `modifyClass` 来更改加载状态。因为在页面加载时，加载滑块有时会恢复到 `ready` 状态，这会导致加载停止并重新开始。状态更改会在页面加载时导致闪烁。

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年十月5日 21:25 UTC](https://meta.discourse.org/t/loading-slider-to-spinner/281207/2 "2023-10-05T21:25:20Z")

</div>

干得漂亮，@Don - 很棒的 SCSS 代码。太搞笑了 😆 也许 Discourse 会将其纳入核心？🤔
