Оригинальный прелоадер
Необычный анимированный эффект для прелоадера (загрузчика) на css3 и jQuery.
HTML
<div class="preloader">
<div class="circle"></div>
<div class="percent">0%</div>
</div>
<div class="end">Спасибо за ваше терпение!</div>CSS
@-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;
}JS
Подключаем jQuery и easing плагин:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.easing.js" type="text/jаvascript"></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);
}
});
Ссылки
