Это наверное самый простой скрипт загрузки страницы из всех возможных
Разметка
<div class="preloader">
<div class="loading">
<div class="loading_in">
<img src="изображение" alt="" />
</div>
</div>
</div>
jQuery
<script type="text/javascript">
jQuery(function($) {
$(window).load(function () {
$(".preloader").fadeOut(700);
});
});
</script>
CSS
.preloader {background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;display:table;width:100%;height:100%;}
.loading {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align: center;}
.loading_in {display:inline-block;padding:40px;background:#FFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px}
На этом всё.
На заметку! Если вы планируете использовать большое изображение, то данный процесс загрузки можно реализовать при помощи только CSS с применением свойства background-image.
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |