Индикатор загрузки страницы для сайтов системы uCoz (индикаторы построены на HTML 5 canvas для uCoz)



Разработчик: неизвестен

Каждый настоящий ВЕБ мастер хоть раз задумывался о том, что нужно сменить индикатор загрузки страниц своего сайта, но порой выбор был или очень мал или нечего не работало. Сегодня же я предлагаю вам 9 видов альтернативных индикаторов загрузки. Из такого количества индикаторов загрузки каждый WEB мастер сможет выбрать что то свое независимо от того на какую тематику у него сайт, форум, блог и тд.
Установка:

1) Скачиваем папку js и заливаем из не все в ФМ своего сайта в папку js

2) Теперь на нужной странице перед

Code
<html>


Ставим Код 1 (Индикатор №1)

Код 1:

Code
<div style="position:absolute;top:300px;left:50%;margin-left:-64px;z-index:999;" id="in"></div>  
  <div class="mydv" style="display:none;">  
  <script type="text/javascript" src="/js/sonic.js"></script>  
  <script>  
  var loaders = [  
  {  
  width: 100,  
  height: 50,  
  padding: 10,  

  stepsPerFrame: 2,  
  trailLength: 1,  
  pointDistance: .03,  

  strokeColor: '#FF7B24',  
   
  step: 'fader',  

  multiplier: 2,  

  setup: function() {  
  this._.lineWidth = 5;  
  },  

  path: [  
   
  ['arc', 10, 10, 10, -270, -90],  
  ['bezier', 10, 0, 40, 20, 20, 0, 30, 20],  
  ['arc', 40, 10, 10, 90, -90],  
  ['bezier', 40, 0, 10, 20, 30, 0, 20, 20]  
  ]  
  }  

  ];  

  var d, a, container = document.getElementById('in');  

  for (var i = -1, l = loaders.length; ++i < l;) {  
   
  d = document.createElement('div');  
  d.className = 'l';  

  a = new Sonic(loaders[i]);  

  d.appendChild(a.canvas);  
  container.appendChild(d);  

  a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';  
  a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';  

  a.play();  

  }  
  </script>



3) На этойже странице сразу после

Code
</html>


Ставим Код 2

Код 2:

Code
<script>  
  $(window).load(function() {  
  $('#in').fadeOut(0);  
  $('.mydv').css('display', 'block');  
  });  
  </script>  
  </div>


3) Начинаем перебирать оставшиеся прелойдеры, находим в JavaScripte данный кусочек кода:

Code
<script>  
  var loaders = [


И удаляем после него все до этой части кода:

Code
];  

  var d, a, container = document.getElementById('in');  

  for (var i = -1, l = loaders.length; ++i < l;) {  
   
  d = document.createElement('div');  
  d.className = 'l';  

  a = new Sonic(loaders[i]);  

  d.appendChild(a.canvas);  
  container.appendChild(d);  

  a.canvas.style.marginTop = (150 - a.fullHeight) / 2 + 'px';  
  a.canvas.style.marginLeft = (150 - a.fullWidth) / 2 + 'px';  

  a.play();  

  }  
  </script>


И еще 8 вариантов индикаторов загрузки страницы для вашего сайта:

Индикатор №2

Code
{  
  width: 30,  
  height: 30,  

  stepsPerFrame: 2,  
  trailLength: .3,  
  pointDistance: .1,  
  padding: 10,  

  fillColor: '#D4FF00',  
  strokeColor: '#FFF',  

  setup: function() {  
  this._.lineWidth = 20;  
  },  

  path: [  
  ['line', 0, 0, 30, 0],  
  ['line', 30, 0, 30, 30],  
  ['line', 30, 30, 0, 30],  
  ['line', 0, 30, 0, 0]  
  ]  
  }



Индикатор №3

Code
{  
  width: 100,  
  height: 100,  

  stepsPerFrame: 1,  
  trailLength: 1,  
  pointDistance: .025,  

  strokeColor: '#05E2FF',  

  fps: 20,  

  setup: function() {  
  this._.lineWidth = 2;  
  },  
  step: function(point, index) {  

  var cx = this.padding + 50,  
  cy = this.padding + 50,  
  _ = this._,  
  angle = (Math.PI/180) * (point.progress * 360);  

  this._.globalAlpha = Math.max(.5, this.alpha);  

  _.beginPath();  
  _.moveTo(point.x, point.y);  
  _.lineTo(  
  (Math.cos(angle) * 35) + cx,  
  (Math.sin(angle) * 35) + cy  
  );  
  _.closePath();  
  _.stroke();  

  _.beginPath();  
  _.moveTo(  
  (Math.cos(-angle) * 32) + cx,  
  (Math.sin(-angle) * 32) + cy  
  );  
  _.lineTo(  
  (Math.cos(-angle) * 27) + cx,  
  (Math.sin(-angle) * 27) + cy  
  );  
  _.closePath();  
  _.stroke();  
  },  
  path: [  
  ['arc', 50, 50, 40, 0, 360]  
  ]  
  }


Индикатор №4

Code
{  
  width: 100,  
  height: 50,  

  stepsPerFrame: 1,  
  trailLength: 1,  
  pointDistance: .1,  
  fps: 15,  
  padding: 10,  
  //step: 'fader',  

  fillColor: '#FF2E82',  

  setup: function() {  
  this._.lineWidth = 20;  
  },  

  path: [  
  ['line', 0, 20, 100, 20],  
  ['line', 100, 20, 0, 20]  
  ]  
  }



Индикатор №5

Code
{  

  width: 100,  
  height: 100,  

  stepsPerFrame: 7,  
  trailLength: .7,  
  pointDistance: .01,  
  fps: 30,  

  setup: function() {  
  this._.lineWidth = 10;  
  },  

  path: [  
  ['line', 20, 70, 50, 20],  
  ['line', 50, 20, 80, 70],  
  ['line', 80, 70, 20, 70]  
  ]  
  }



Индикатор №6

Code
{  

  width: 100,  
  height: 100,  

  stepsPerFrame: 4,  
  trailLength: 1,  
  pointDistance: .01,  
  fps: 25,  

  fillColor: '#FF7B24',  

  setup: function() {  
  this._.lineWidth = 10;  
  },  

  step: function(point, i, f) {  

  var progress = point.progress,  
  degAngle = 360 * progress,  
  angle = Math.PI/180 * degAngle,  
  angleB = Math.PI/180 * (degAngle - 180),  
  size = i*5;  

  this._.fillRect(  
  Math.cos(angle) * 25 + (50-size/2),  
  Math.sin(angle) * 15 + (50-size/2),  
  size,  
  size  
  );  

  this._.fillStyle = '#63D3FF';  

  this._.fillRect(  
  Math.cos(angleB) * 15 + (50-size/2),  
  Math.sin(angleB) * 25 + (50-size/2),  
  size,  
  size  
  );  

  if (point.progress == 1) {  

  this._.globalAlpha = f < .5 ? 1-f : f;  

  this._.fillStyle = '#EEE';  

  this._.beginPath();  
  this._.arc(50, 50, 5, 0, 360, 0);  
  this._.closePath();  
  this._.fill();  

  }  

  },  

  path: [  
  ['line', 40, 10, 60, 90]  
  ]  
  }



Индикатор №7

Code
{  

  width: 100,  
  height: 100,  

  stepsPerFrame: 3,  
  trailLength: 1,  
  pointDistance: .01,  
  fps: 30,  
  step: 'fader',  

  strokeColor: '#D4FF00',  

  setup: function() {  
  this._.lineWidth = 6;  
  },  

  path: [  
  ['arc', 50, 50, 20, 360, 0]  
  ]  
  }



Индикатор №8

Code
{  

  width: 100,  
  height: 100,  

  stepsPerFrame: 1,  
  trailLength: 1,  
  pointDistance: .02,  
  fps: 30,  

  fillColor: '#05E2FF',  

  step: function(point, index) {  
   
  this._.beginPath();  
  this._.moveTo(point.x, point.y);  
  this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);  
  this._.closePath();  
  this._.fill();  

  },  

  path: [  
  ['arc', 50, 50, 30, 0, 360]  
  ]  

  }



Индикатор №9

Code
{  

  width: 100,  
  height: 100,  

  stepsPerFrame: 1,  
  trailLength: 1,  
  pointDistance: .05,  

  strokeColor: '#FF2E82',  

  fps: 20,  

  setup: function() {  
  this._.lineWidth = 4;  
  },  
  step: function(point, index) {  

  var cx = this.padding + 50,  
  cy = this.padding + 50,  
  _ = this._,  
  angle = (Math.PI/180) * (point.progress * 360),  
  innerRadius = index === 1 ? 10 : 25;  

  _.beginPath();  
  _.moveTo(point.x, point.y);  
  _.lineTo(  
  (Math.cos(angle) * innerRadius) + cx,  
  (Math.sin(angle) * innerRadius) + cy  
  );  
  _.closePath();  
  _.stroke();  

  },  
  path: [  
  ['arc', 50, 50, 40, 0, 360]  
  ]  
  }


В установке нет нечего сложно, все делается всего в несколько шагов поэтому не стоит говорить что тут много чего нужно делать и нечего не работает, т.к. все работает и выглядит очень красиво! Неуверенны в себе не мучайте себя установкой!


Категория: Индикаторы загрузки | Добавил: GaV | Теги: скрипт, Индикатор загрузки страницы для сай, альтернативный, uCoz, загрузка страницы
Просмотров: 1583 | Загрузок: 270 | Комментарии: 6 | Рейтинг: 5.0/1
Всего комментариев: 6
1 Dracula  
0
А как можно изменить изображение загрузки на свое?

2 GaV  
0
Думаю нужно редактировать скрипт в js файле и вставлять туда свой индикатор

3 Dracula  
0
И еще вопрос, это все чудо что на все страницы пихать?

4 GaV  
0
Порядок установки смотрите от слова "Установка:" до слова "И еще 8 вариантов индикаторов загрузки страницы для вашего сайта:" все что ниже это уже другой индикатор, порядок установки для всех одинаков

5 Dracula  
0
Меня вот это смущает "2) Теперь на нужной странице перед" Это получается если я хочу поставить индикатор на все страницы, то все это проделывать со всеми нада? Я реально в панике...

6 GaV  
0
Пробуйте для начало на "страницы сайта" или же на конкретной странице которой хотите видеть индикатор, то что ""2) Теперь на нужной странице перед"" это не значит что на всех страницах нужно ставить, это означает, что вам нужно поставить данный скрипт нужном разделе (Форум, каталог файлов и тд).

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]