chemmens

JavaScript Metro style loading bar class

Jun 7th, 2012
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function (window, document, lib, undefined) {
  2.     "use strict";
  3.     if (lib == undefined || !lib instanceof Assembly ) throw "LoadingBar must be part of an assembly.";
  4.  
  5.     lib.LoadingBar = function (args /* { element : document element, numBlocks : integer } */) {
  6.         var args = args == undefined ? { numBlocks: this.numBlocks, element: document.createElement('div')} : args;
  7.         this.numBlocks = args.numBlocks == undefined ? this.numBlocks : typeof args.numBlocks == 'number' ? args.numBlocks : this.numBlocks;
  8.         this.element = args.element == undefined ? document.createElement('div') : args.element;
  9.         this.element.className = 'loading-bar';
  10.         this.element.style.position = 'relative';
  11.         this.element.style.left = '0';
  12.         this.element.style.right = '0';
  13.         this.element.style.overflow = 'hidden';
  14.         this.setDimensions();
  15.         var _this = this;
  16.         window.addEventListener('resize', function () { _this.setDimensions() });
  17.         return this;
  18.     }
  19.     lib.LoadingBar.prototype = {
  20.         constructor: lib.LoadingBar,
  21.         interval: null,
  22.         loops: 0,
  23.         loopPauseDuration: 1000,
  24.         element: null,
  25.         numBlocks: 5,
  26.         animationSpeed: 10,
  27.         blockDisplacemenetSpeed: 6,
  28.         slowDownPercentage: 50,
  29.         slowDownRange: 0,
  30.         slowDownAreaStart: 0,
  31.         slowDownAreaStop: 0,
  32.         setDimensions: function () {
  33.             this.element.style.width = window.innerWidth + 'px';
  34.             this.slowDownRange = Math.floor((parseInt(this.element.style.width) / 3));
  35.             this.slowDownAreaStart = this.slowDownRange;
  36.             this.slowDownAreaStop = this.slowDownRange * 2;
  37.         },
  38.         addBlock: function () {
  39.             var block = document.createElement('div');
  40.             block.className = 'block';
  41.             block.style.position = 'fixed';
  42.             block.style.display = 'block';
  43.             this.element.appendChild(block);
  44.             return block;
  45.         },
  46.         removeBlock: function (index) {
  47.             this.element.removeChild(this.element.getElementsByClassName('block')[index]);
  48.         },
  49.         clearBlocks: function () {
  50.             while (this.element.hasChildNodes()) {
  51.                 this.element.removeChild(this.element.lastChild);
  52.             }
  53.         },
  54.         start: function () {
  55.             this.reset();
  56.             for (var i = 0; i < this.numBlocks; i++) {
  57.                 this.addBlock().style.left = Math.floor(-1 * (1 + i) * (this.slowDownRange / this.numBlocks)) + 'px';
  58.             }
  59.             var pause = this.loops == 0 ? 0 : this.loopPauseDuration,
  60.                 _this = this;
  61.             this.loops++;
  62.             this.interval = setTimeout(function () { _this.animate(); }, pause);
  63.             return this;
  64.         },
  65.         animate: function () {
  66.             var _this = this,
  67.                 blocks = this.element.getElementsByClassName('block');
  68.             if (blocks.length == 0) return this.start();
  69.             for (var i in blocks) {
  70.                 if (typeof blocks[i] == 'object') {
  71.                     var x = parseInt(blocks[i].style.left),
  72.                     displacementSpeed = this.blockDisplacemenetSpeed;
  73.                     if (x >= this.slowDownAreaStart && x <= this.slowDownAreaStop) {
  74.                         displacementSpeed = Math.floor(displacementSpeed / (100 / this.slowDownPercentage));
  75.                     }
  76.                     blocks[i].style.left = (x + displacementSpeed) + 'px';
  77.                     if (parseInt(blocks[i].style.left) >= parseInt(this.element.style.width)) {
  78.                         this.removeBlock(i)
  79.                     }
  80.                 }
  81.             }
  82.             this.interval = setTimeout(function () { _this.animate(); }, _this.animationSpeed);
  83.         },
  84.         reset: function () {
  85.             this.clearBlocks();
  86.             clearTimeout(this.interval);
  87.         },
  88.         stop: function () {
  89.             this.loops = 0;
  90.             this.clearBlocks();
  91.             clearTimeout(this.interval);
  92.         }
  93.     }
  94. })(window, document, Metro)
Advertisement
Add Comment
Please, Sign In to add comment