Красивый загрузчик сайта на CSS3 и jQuery

Красивый загрузчик сайта на CSS3 и jQuery

02012-06-2149181Денис Абдуллин
Если сайт ваш позиционируется как онлайн приложение или даже это может быть сайт с онлайн-игрой, ему не помешал бы красивый прелоадер. Сама загрузка выглядит анимировано, это красивый загрузчик сайта на CSS3 и jQuery. Имеется кружочек посередине, на протяжении всей загрузки в этот кружочек стремятся попасть другие, прозрачные кружочки.

Подключение JQuery и плагина

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script src="jquery.easing.js" type="text/javascript"></script>


Код HTML

Code
<div class="preloader">  
<div class="circle"></div>  
<div class="percent">0%</div>  
</div>  

<div class="end">Это то, что должно загрузиться</div>


Код JavaScript

Code
<script type="text/javascript">  
$(function(){  

var preloader = $('.preloader'),  
end = $('.end'),  
pw = preloader.width(),  
percent = preloader.find('.percent'),  
circle = preloader.find('.circle'),  
l = 8, j = 0;  

var timer = setInterval(function(){  
var p = parseInt((100/l)*j),  
w = (150*p)/100;  

for (i=0;i<15;i++){  
preloader.append($('<span />'));  
}  

var span = preloader.find('span');  

span.each(function(){  
var t = $(this),  
x = random(-250, 250),  
y = random(-250, 250),  
d = random(10, 20),  
css = {  
top: y,  
left: x,  
width: d,  
height: d,  
'-moz-border-radius': d,  
'-webkit-border-radius': d,  
'border-radius': d,  
opacity: .7  
},  
animation = {  
top: pw/2-d/2,  
left: pw/2-d/2,  
opacity: 0  
}  

t.css(css).stop(true, true).animate(animation, 900, 'easeInBack', function(){  
t.remove();  
var css = {  
opacity: p/100  
}  
circle.css(css);  
});  

});  

percent.text(p+'%')  

if (p > 99){  
clearInterval(timer);  
setTimeout(function(){  
preloader.fadeOut(400);  
end.fadeIn();  
}, 1500);  
}  
j++;  
}, 1000);  

function random(min, max){  
return Math.floor((Math.random()*(max-min+1))+min);  
}  

});  
</script>


Этот скрипт так-же можно подключить отдельным файлом.

Code
<script src="init.js" type="text/javascript"></script>


*Файл init.js так-же имеется в архиве

CSS

Code
@-webkit-keyframes pulse {  
from { -webkit-box-shadow: 0 0 50px #fff; }  
50% { -webkit-box-shadow: 0 0 100px #fff; }  
to { -webkit-box-shadow: 0 0 50px #fff; }  
}  

.preloader {  
position:absolute;  
top:50%;  
left:50%;  
z-index:2;  
width:30px;  
height:30px;  
margin:-15px 0 0 -15px;  
background:rgba(0, 0, 0, .2);  
-moz-border-radius:30px;  
-webkit-border-radius:30px;  
border-radius:30px;  
-webkit-animation-name:pulse;  
-webkit-animation-duration:2s;  
-webkit-animation-iteration-count:infinite;  
}  

.preloader .percent {  
display:block;  
position:absolute;  
left:50%;  
bottom:-50px;  
width:100px;  
margin-left:-50px;  
text-align:center;  
font-family:'PT Sans Narrow', sans-serif;  
font-size:22px;  
color:#fff;  
}  

.preloader .circle {  
position:absolute;  
top:50%;  
left:50%;  
width:20px;  
height:20px;  
margin:-10px 0 0 -10px;  
background:#fff;  
opacity:0;  
-moz-border-radius:20px;  
-webkit-border-radius:20px;  
border-radius:20px;  
}  

.preloader span {  
background:#fff;  
position:absolute;  
width:10px;  
height:10px;  
}

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Гладнев Ярослав 2012-06-22 в 00:50 / МатериалСпам
Не вижу толку ставить его,только заставляет пользователя ждать... в Играх то понятно,но на сайтах такое бы не ставил...
6
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.