# 发现了一个可行的 CSS 技巧，可在初始加载缓慢时显示加载动画
**URL:** https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199
**Category:** UX
**Created:** [2018年三月30日 03:32 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199 "2018-03-30T03:32:11Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@daveaevion](https://meta.discourse.org/u/daveaevion)
#### Post date: [2018年三月30日 03:32 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/1 "2018-03-30T03:32:11Z")
I’ve read a few posts about people wanting a spinner or loading image for the initial discourse load as it may be quite slower than subsequent loads. I realize this is a CSS hack and not a fancy or beautiful fix, but it is working well enough for my discourse needs.
## Update with theme component
[https://github.com/daveaevion/discourse-spinner-theme-component](https://github.com/daveaevion/discourse-spinner-theme-component)
* * *
If you want to use the discourse spinner on the initial load in addition to between page loads, follow the following steps.
## Step 1:
Add the following code to your CSS:
`#main {background: white;}`
The main container is naturally a higher z-index than the header so this step ensures that once it loads, it will cover up the spinner.
## Step 2:
Place this code in your header:
``
This loads the built-in discourse CSS spinner, but feel free to use another if you’d prefer.
This code will center the spinner on your screen and place it high up enough to not create a duplicate spinner when doing page loads later on. The calc is half of the 30px spinner width (15px), plus the 4px border.
## Working example
> **[Nursejanx](https://nursejanx.com/)**
>
> All things nursing. Nursejanx provides NCLEX reviews & recommendations, nursing report sheets, and advice for nurses & nursing students.
If someone could create a javascript script that would delete the spinner div after the initial page load, it would simply disappear after serving its initial purpose, and there would be no need for step 1.
* * *
It’s definitely quick, but at least on the desktop, there should be a briefly visible spinner on the initial discourse page load vs. nothing but white on vanilla.
The header section is being loaded faster than the main container which explains why it shows up. I guess the slower the server, the more use this has.
### Video comparison between this CSS hack and Vanilla Discourse
[https://drive.google.com/file/d/1xkBZEfVQP\_5-4\_pIattqoTWe6uUiZl30/view](https://drive.google.com/file/d/1xkBZEfVQP_5-4_pIattqoTWe6uUiZl30/view)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年三月30日 04:59 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/2 "2018-03-30T04:59:06Z")
I am having trouble confirming that this does anything? I can’t see any difference over vanilla Discourse?
---
### Author:  [@daveaevion](https://meta.discourse.org/u/daveaevion)
#### Post date: [2018年三月30日 05:03 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/3 "2018-03-30T05:03:03Z")
It’s definitely quick, but at least on the desktop, there should be a briefly visible spinner on the initial discourse page load vs. nothing but white on vanilla.
The header section is being loaded faster than the main container which explains why it shows up. I guess the slower the server, the more use this has.
---
### Author:  [@daveaevion](https://meta.discourse.org/u/daveaevion)
#### Post date: [2018年三月30日 05:13 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/4 "2018-03-30T05:13:24Z")
Here is a link to a loading video comparing [meta.discourse.org](http://meta.discourse.org) to [forum.nursejanx.com](http://forum.nursejanx.com)
[https://drive.google.com/file/d/1xkBZEfVQP\_5-4\_pIattqoTWe6uUiZl30/view](https://drive.google.com/file/d/1xkBZEfVQP_5-4_pIattqoTWe6uUiZl30/view)
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2018年四月4日 02:58 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/5 "2018-04-04T02:58:58Z")
Could you please turn this into a #themes component?
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2018年五月15日 05:22 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/6 "2018-05-15T05:22:31Z")
A post was split to a new topic: [Spinner on initial load](https://meta.discourse.org/t/spinner-on-initial-load/87513)
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2018年五月15日 05:22 UTC](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199/7 "2018-05-15T05:22:53Z")
Continued here:
> [@Spinner on initial load](https://meta.discourse.org/t/spinner-on-initial-load/87513):
>
> First attempt at creating a theme component for adding the spinner to the initial discourse load. Theme preview