Answer the question
In order to leave comments, you need to log in
Answer the question
In order to leave comments, you need to log in
Approximately as follows.
At the very beginning, let's hide the main content that is in the wrapper, for example, by setting the transparency to 0
#wrapper {
opacity: 0;
}
#main_preload{
position: fixed;
width: 64px;
height: 64px;
left: 50%;
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id="main_preload"></span>
<div id="wrapper">
<!-- content -->
</div>
<script type="text/javascript" src="path/to/loader.js"></script>
</body>
</html>
var preload = $("#main_preload"),
w = $(window).width() / 2 - 30,
h = $(window).height() / 2 - 30;
preload.html('<img src="/path/to/preload.gif" alt="load content."/>');
preload.css({"top": h + 'px', "left": w + 'px'});
$(window).load(function () {
setTimeout(function () {
preload.animate({opacity: "0"}, 50, function () {
preload.html("")
});
$("#wrapper").animate({opacity: "1"}, 50)
}, 250)
});
A preloader is just an image centered on a div that is superimposed absolute on top of the blockable area or button.
General principle:
position: absolute; width: 100% height: 100%; background: url(!image.gif!) center center no-repeat; z-index: 1;
Display at the time of request. Hide when it completes in any way - by mistake or by success.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question