加载之前的屏幕<；头>； 我想把下面的SVG加载到头标签之前，它绝对位于屏幕中间。 我有很多css和其他javascript，我想先显示加载屏幕

这可能吗

CSS:

html body svg#circle-loader {
    position: absolute; float: none; clear: both; top: 50%; right: 0; bottom: 0; left: 50%;
    width: 50px; height: 50px; margin: -25px 0 0 -25px;
    -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite;
}

@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

html body svg#circle-loader circle {
  stroke-dasharray: 187; stroke-dashoffset: 50;
  stroke: rgba(26, 60, 88, 0.9);
  -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center;                   
}

<svg id="circle-loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 66" preserveAspectRatio="xMixYMid meet">
        <circle class="path" fill="none" stroke-width="8" stroke-linecap="round" cx="33" cy="33" r="28"></circle>
</svg>

HTML:

html body svg#circle-loader {
    position: absolute; float: none; clear: both; top: 50%; right: 0; bottom: 0; left: 50%;
    width: 50px; height: 50px; margin: -25px 0 0 -25px;
    -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite;
}

@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

html body svg#circle-loader circle {
  stroke-dasharray: 187; stroke-dashoffset: 50;
  stroke: rgba(26, 60, 88, 0.9);
  -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center;                   
}

<svg id="circle-loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 66" preserveAspectRatio="xMixYMid meet">
        <circle class="path" fill="none" stroke-width="8" stroke-linecap="round" cx="33" cy="33" r="28"></circle>
</svg>

---

我会将svg css内联放置在

头部

的顶部，然后是css文件includes，svg代码位于

正文

的顶部，所有javascript文件包括在

正文

的底部（它们应该在哪里）：

... svg css，内联。。。
:
... 您的svg html。。。
... 页面内容。。。
:

然后，在所有内容都完全加载后，放弃或隐藏svg

---

顺便说一句，我要偷走你漂亮的动画：）

在你的身体里，你可以先把SVG包装成一个div

由于文档的其余部分可能有一个相当大的CSS和jQ文件，您可以专门为加载程序设置一个CSS和jQuery文件，并将它们放在标题中，以便它们首先加载（因为它们的大小很小）。这将是比将CSS/jQ内联放置更好的实践

使用所需的任何内容设置CSS加载程序文件，并将z索引设置为高于页面上的其他元素，例如

#loader {
background: #FAFAFA;
z-index: 1000;
}

然后设置jQ文件，以便在页面中加载所有其他内容后，您将删除loader div，例如

$(window).load(function() {
$('#loader').css({'display':'none');
});

更新

不使用“无显示”，您可以通过使用以下命令来减少显示的突然性：

$(window).load(function() {
$('#loader').hide("slow");
});

---

为什么不创建另一个div，通过使用更高的z索引覆盖您的内容，该索引包含SVG，然后在加载页面时关闭该div？这应该在您的body标签中，body之外的对象将成为坏对象markup@Alex为了进入加载屏幕，它必须通过头部标签。加载所有CSS和javascript。然后移动到主体并加载div。有什么原因不能先加载css/js文件吗？@Michael，这和js需要加载一点时间……将动画放在

主体的顶部，并将其必要的css放在
头部。将css include放在
头部
中，js include放在
正文
的底部。我有没有办法强制加载一个div，然后再加载其他任何东西（可能是使用内嵌css）Javascript？在html中，你应该将div放在最顶部，直接放在body标记下，这将实现这一点。如果我使用
load_js（）;？您是指脚本吗？如果是的话，您可以这样做，但是您可以通过将加载程序css/jq放在页眉中，然后将css/js的其余部分放在页脚中来提高效率。这意味着您的加载程序和页面内容将首先加载，然后在最后加载较大的文件。然后，一旦加载了所有内容，.hide将发挥作用并显示您的页面。另外，这样做可以节省加载另一个脚本的时间。但是我应该注意，在页脚中加载其他css在技术上是无效的，但仍然可以工作。你最大的css文件有多大，如果把它也放在页眉中，而把较大的JS文件放在页脚中，这会是一个大问题吗？请欣赏动画：）