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


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

1961
7.8 из 10
Проголосовало: 11






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

Подключение JQuery и плагина y (между <head> и </head>) вставьте:

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 (между <body> и </body>)

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


Код JavaScript (так же как и выше, но желательно перед </body>) ниже указан 2 вариант!

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>


Или поставьте этот код в <head>

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


Код CSS (в ваши 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;  
  }
Автор публикации: Загрузка
Загрузка
doc74, это его n материал
Источник: http://pcvector.net/
  • Всего комментариев: 1

Administrator7015
0
Administrator7015 написал: Написано 24 Июня 2012 в 15:39
Комментарий №1
Ну вот нафига все копипастить с других сайтов?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: