Loading screen before <head>
Question
I would like to load the following svg, which is absolutely positioned in the middle of the screen, before the head tag. I've got a lot of css and other javascript, and I want to show the loading screen before anything else.
Is this possible?
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;
}
HTML:
<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>
2 answers
solution1
0 2015-02-12 23:28:11
I would place the svg css inline on top of head , followed by the css file includes, the svg code on top of body , and all the javascript file includes at the bottom of body (where they should be):
<html>
<head>
<style>... the svg css, inline ... </style>
<link rel="stylesheet" href="... other css files ...">
:
</head>
<body>
<div>
... your svg html ...
</div>
... page content ...
<script src="... js scripts ..."></script>
:
</body>
</html>
And then, once everything is fully loaded, discard or hide the svg.
PS. I'm going to steal your nice animation :)
solution2
0 ACCPTED 2015-02-12 23:39:51
In your body you could wrap the SVG in a div first off.
As you may have quite a big CSS and jQ file for the rest of your document, you could set up a CSS and jQuery file specifically for your loader and put them into your header so that they load first (as they will be small in size). This would be better practice than placing the CSS/jQ inline.
Set up your CSS loader file with whatever is needed and set the z-index to be higher than the other elements on the page, eg
#loader {
background: #FAFAFA;
z-index: 1000;
}
Then set up your jQ file so that once everything else is loaded in the page you will remove the loader div, eg
$(window).load(function() {
$('#loader').css({'display':'none');
});
UPDATE
Instead of using display none you could do it less abruptly by using this :
$(window).load(function() {
$('#loader').hide("slow");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.