ПРЕЛОАДЕР (АНИМИРОВАННАЯ ЗАГРУЗКА) НА HTML5


ПРЕЛОАДЕР (АНИМИРОВАННАЯ ЗАГРУЗКА) НА HTML5


Простой прелоадер для сайта. Эффект анимированной загрузки чего-либо.

Просто в тело вставить код:
<article><canvas width="300" height="100"></canvas></article>
    
<script>

buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });

function buildSpinner(data) {
  
  var canvas = document.createElement('canvas');
  canvas.height = 100;
  canvas.width = 300;
  document.getElementsByTagName('article')[0].appendChild(canvas);
  var ctx = canvas.getContext("2d"),
    i = 0, degrees = data.degrees, loops = 0, degreesList = [];
    
  for (i = 0; i < degrees; i++) {
    degreesList.push(i);
  }
  
  // reset
  i = 0;
  
  // so I can kill it later
  window.canvasTimer = setInterval(draw, 1000/degrees);  

  function reset() {
    ctx.clearRect(0,0,100,100); // clear canvas
    
    var left = degreesList.slice(0, 1);
    var right = degreesList.slice(1, degreesList.length);
    degreesList = right.concat(left);
  }
  
  function draw() {
    var c, s, e;

    var d = 0;

    if (i == 0) {
      reset();
    }

    ctx.save();

    d = degreesList;
    c = Math.floor(255/degrees*i);
    ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
    ctx.lineWidth = data.size;
    ctx.beginPath();
    s = Math.floor(360/degrees*(d));
    e = Math.floor(360/degrees*(d+1)) - 1;

    ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
    ctx.stroke();

    ctx.restore();

    i++;
    if (i >= degrees) {
      i = 0;
    }
  }  
}
</script>


Скачать исходник:
preloader_html5.rar


скрипт скрипт ПРЕЛОАДЕР (АНИМИРОВАННАЯ ЗАГРУЗКА) НА HTML5
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2515
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация