Красивый загрузчик сайта на CSS3 и jQuery
Если сайт ваш позиционируется как онлайн приложение или даже это может быть сайт с онлайн-игрой, ему не помешал бы красивый прелоадер. Сама загрузка выглядит анимировано, это красивый загрузчик сайта на CSS3 и jQuery. Имеется кружочек посередине, на протяжении всей загрузки в этот кружочек стремятся попасть другие, прозрачные кружочки.
Подключение JQuery и плагина
Код HTML
Код JavaScript
Этот скрипт так-же можно подключить отдельным файлом.
*Файл init.js так-же имеется в архиве
CSS
Подключение 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>
<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>
<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>
$(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;
}
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;
}
