【发布时间】：2014-10-04 21:05:02
【问题描述】：
这有点难以解释，所以我会尽力而为
所以当一个 HTML 页面加载时，我希望有一个很酷的加载屏幕。完成加载后，我希望清除加载屏幕并显示 HTML 文档。
基本上，我想要这个：
CSS：
/* Absolute Center CSS Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML：
<div class="loading">Loading…</div>
在页面加载时发生。当页面加载时，它被清除，并显示 HTML 文档的其余部分。 （我正在制作一个积分系统，虽然积分加载我真的需要它说它正在加载，但人们抱怨他们无法点击任何东西，我必须告诉他们它只是在加载）
我想尽可能地远离 Ajax，因为我想学习 Javascript。
【问题讨论】：
-
先加载“加载”屏幕怎么样？它可能会稍微减慢实际加载过程，但从心理学的角度来看，这将有很大帮助
-
@Rebirth 我可以，但是你的意思是喜欢有一个带有加载屏幕的页面，然后在 3 秒后重定向到真实页面吗？我可以这样做，但问题是，它并没有真正加载它，所以它看起来有点……幼稚。即使这样，我在 Jsfiddle 上运行它，我认为它不允许您在一个项目中制作多个页面。不过，我将通过将站点代码复制到我的计算机来尝试一下，看看它是如何工作的。
-
我会说显示加载屏幕并使用 ajax 请求实际页面（对不起，我知道你想远离 ajax）。并在使用
success:选项加载它时显示它。此外，即使它没有真正加载，最终用户也永远不会更聪明，因为技术已经告诉很多用户会有加载或启动过程。 -
@Rebirth 我想我将不得不解决 Ajax 或做假重定向的事情，直到出现新的东西。感谢您至少尝试提供帮助！
标签： javascript jquery html css loading