livingston · June 26, 2010 22:13 · livingston · Jun 26, 2010
diff --git a/simple-progress-bar.html b/simple-progress-bar.html
 <!DOCTYPE html>
 <!--
      __         __   ___      ___   __
     |  |       |  |  \  \    /  /  |  |
     |  |       |  |   \  \  /  /   |  |
     |  |____   |  |    \  \/  /    |  |
     |_______|  |__|     \____/     |__|
        HAND CODED BY LIVINGSTON SAMUEL
 -->
 <html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Simple Progress Bar</title>

    <style>
      #progress-bar { width:100%; height:35px; background:#2C953C; border-radius:10px; position:relative }
      #progress { width:0%; height:35px; background:#55CE3C; border-radius:10px }
      #progress-status { position:absolute; left:0; top:0; text-align:center; width:100%; color:#fff; font-weight:bold; padding:7px 0 0 }

      #errorMsg { display:none; color:#800 }
    </style>
  </head>
  <body>
    <input type='text' maxlength='3' id='progress-value' /><button id='update'>Update Progress</button>
    <span id='errorMsg'>Please Enter a number between 0 and 100</span>
    <script>
      (function (W, D, M) {
        W.Progress = (function () {
          var body = D.getElementsByTagName('body')[0],
            progressBar = D.createElement('div'),
            progress = progressBar.cloneNode(false),
            progressStatus = progressBar.cloneNode(false),
            interval, isAnimating = false;

          progressBar.id = 'progress-bar';
          progress.id = 'progress';
          progressStatus.id = 'progress-status';

          progressBar.appendChild(progressStatus);
          progressBar.appendChild(progress);
          body.appendChild(progressBar);

          return {
            update: function (val) {
              var i = parseInt(progress.style.width, 10) | 0,
                dir = (val > i)? 0.1 : -0.1;

              val = M.floor(val);

              if (val === i) { return }
              progressStatus.innerHTML = val + '%';

              if (isAnimating) { clearInterval(interval) }

              isAnimating = true;

              interval = setInterval(function() {
                i += dir;
                progress.style.width = i + '%';
                if(M.floor(i) === val || i < 0 || i > 100)  {
                  clearInterval(interval);
                  isAnimating = false;
                }
              },10);
            },
            reset: function () {
              this.update(0)
            },
            hide: function () {
              progressBar.style.display = 'none'
            },
            show: function () {
              progressBar.style.display = ''
            }
          };
        }());

        var bind = (function () {
          if (D.addEventListener) {
            return function (elem, evt, fn) {
              elem.addEventListener(evt, fn, false);
            }
          } else if (D.attachEvent) {
            return function (elem, evt, fn) {
              elem.attachEvent('on' + evt, fn);
            }
          } else {
            return function (elem, evt, fn) {
              var evnt = 'on' + evt,
                oldFn = elem[evnt];

              elem[evnt] = function () {
                if(typeof oldFn === 'function') {
                  oldFn();
                }

                fn();
              }
            }
          }
        }()),
        progress_value = D.getElementById('progress-value'),
        errorMsg = D.getElementById('errorMsg'),
        updateProgress = D.getElementById('update'), valueCheck = /^\d{1,3}$/;

        bind(updateProgress, 'click', function () {
          var progressValue = parseInt(progress_value.value, 10);

          if (!isNaN(progressValue) && progressValue >= 0 && progressValue <= 100 ) {
            errorMsg.style.display = 'none';
            Progress.update(progressValue);
          } else {
            errorMsg.style.display = 'inline';
            progress_value.value = '';
          }

          progress_value.focus();
        });

        bind(progress_value, 'keydown', function () {
          errorMsg.style.display = 'none';
        });
      }(window, document, Math));
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<!--
	__ __ ___ ___ __
	\| \| \| \| \ \ / / \| \|
	\| \| \| \| \ \ / / \| \|
	\| \|____ \| \| \ \/ / \| \|
	\|_______\| \|__\| \____/ \|__\|
	HAND CODED BY LIVINGSTON SAMUEL
	-->
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<title>Simple Progress Bar</title>

	<style>
	#progress-bar { width:100%; height:35px; background:#2C953C; border-radius:10px; position:relative }
	#progress { width:0%; height:35px; background:#55CE3C; border-radius:10px }
	#progress-status { position:absolute; left:0; top:0; text-align:center; width:100%; color:#fff; font-weight:bold; padding:7px 0 0 }

	#errorMsg { display:none; color:#800 }
	</style>
	</head>
	<body>
	<input type='text' maxlength='3' id='progress-value' /><button id='update'>Update Progress</button>
	<span id='errorMsg'>Please Enter a number between 0 and 100</span>
	<script>
	(function (W, D, M) {
	W.Progress = (function () {
	var body = D.getElementsByTagName('body')[0],
	progressBar = D.createElement('div'),
	progress = progressBar.cloneNode(false),
	progressStatus = progressBar.cloneNode(false),
	interval, isAnimating = false;

	progressBar.id = 'progress-bar';
	progress.id = 'progress';
	progressStatus.id = 'progress-status';

	progressBar.appendChild(progressStatus);
	progressBar.appendChild(progress);
	body.appendChild(progressBar);

	return {
	update: function (val) {
	var i = parseInt(progress.style.width, 10) \| 0,
	dir = (val > i)? 0.1 : -0.1;

	val = M.floor(val);

	if (val === i) { return }
	progressStatus.innerHTML = val + '%';

	if (isAnimating) { clearInterval(interval) }

	isAnimating = true;

	interval = setInterval(function() {
	i += dir;
	progress.style.width = i + '%';
	if(M.floor(i) === val \|\| i < 0 \|\| i > 100) {
	clearInterval(interval);
	isAnimating = false;
	}
	},10);
	},
	reset: function () {
	this.update(0)
	},
	hide: function () {
	progressBar.style.display = 'none'
	},
	show: function () {
	progressBar.style.display = ''
	}
	};
	}());

	var bind = (function () {
	if (D.addEventListener) {
	return function (elem, evt, fn) {
	elem.addEventListener(evt, fn, false);
	}
	} else if (D.attachEvent) {
	return function (elem, evt, fn) {
	elem.attachEvent('on' + evt, fn);
	}
	} else {
	return function (elem, evt, fn) {
	var evnt = 'on' + evt,
	oldFn = elem[evnt];

	elem[evnt] = function () {
	if(typeof oldFn === 'function') {
	oldFn();
	}

	fn();
	}
	}
	}
	}()),
	progress_value = D.getElementById('progress-value'),
	errorMsg = D.getElementById('errorMsg'),
	updateProgress = D.getElementById('update'), valueCheck = /^\d{1,3}$/;

	bind(updateProgress, 'click', function () {
	var progressValue = parseInt(progress_value.value, 10);

	if (!isNaN(progressValue) && progressValue >= 0 && progressValue <= 100 ) {
	errorMsg.style.display = 'none';
	Progress.update(progressValue);
	} else {
	errorMsg.style.display = 'inline';
	progress_value.value = '';
	}

	progress_value.focus();
	});

	bind(progress_value, 'keydown', function () {
	errorMsg.style.display = 'none';
	});
	}(window, document, Math));
	</script>
	</body>
	</html>