<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Amazon" /><meta name="description" content="Amazon.com" /><meta name="apple-touch-fullscreen" content="YES" />
<meta name="viewport" content="format-detection=no,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" />
<title>Happy shopping</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<style>
.bd-rd-sw {border-radius: 6px; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);}
.hidden {display: none;}
.loading {background-color: #DFDFDF; padding: 20px; position: fixed; left: 50%; top: 20%; z-index: 999;}
.overlay {background-color: #DFDFDF; height: 100%; opacity: 0.6; position: absolute; width:100%;}
</style>
</head>
<body>
<script type="text/javascript">
var UI = (function() {
function ProgressWidget(canvasId) {
var CIRCLE_COUNT = 5;
var CIRCLE_OFFSET = 10;
var CIRCLE_RADIUS = 5;
var CIRCLE_LINE = 1;
var COLOR_NORMAL = '#FFFFFF';
var COLOR_SELECTED = '#5995BF';
var DOUBLE_PI = Math.PI * 2;
var INTERVAL_TIME = 300;
var LINE_WIDTH = 1;
var START_POINT = {x: 10, y: 15};
// create DOM objects
var front = $("#loading");
if (front.length == 0) {
front = $("<div class='loading bd-sw hidden' id='loading'></div>");
$("body").append(front);
}
var canvas = $("#progressCanvas");
if (canvas.length == 0) {
canvas = $("<canvas id='progressCanvas' width='150' height='30'></canvas>");
front.append(canvas);
var w = front.width() / 2;
front.css('margin-left', -1 * w);
}
var _count = 0;
var _drawContext = null;
var _drawArea = document.getElementById('progressCanvas');
if (_drawArea && _drawArea.getContext) {
_drawContext = _drawArea.getContext('2d');
}
var _task = null;
function draw() {
_drawContext.clearRect(0, 0, _drawArea.clientWidth, _drawArea.clientHeight);
_drawContext.lineWidth = 1;
var vx = START_POINT.x, vy = START_POINT.y;
var radius = CIRCLE_RADIUS;
var c = _count % CIRCLE_COUNT;
for (var j = 0; j < CIRCLE_COUNT; j++) {
_drawContext.fillStyle = j == c ? COLOR_SELECTED : COLOR_NORMAL;
_drawContext.beginPath();
_drawContext.arc(vx, vy, radius, 0, DOUBLE_PI, true);
_drawContext.fill();
_drawContext.closePath();
radius += 2;
vx += CIRCLE_OFFSET + radius * 2;
}
_count++;
}
this.hide = function() {
front.fadeOut();
if (_task != null) {
clearInterval(_task);
_task == null;
}
};
this.isRunning = function() {
return front.is(':visible');
};
this.show = function(message) {
if (_drawContext == null) {
return;
}
_task = setInterval(draw, INTERVAL_TIME);
front.show();
};
} // Object - ProgressWidget
return {
'getLoadingWidget': function() { return new ProgressWidget(); }
};
})();
var loading = UI.getLoadingWidget();
loading.show();
</script>
</body>
</html>