thislooksfun/progress.htm

## progress.htm
<html>
<head>
	<title>Progress bar testing</title>
	<style>
		body {
			background-color: #444;
			margin: 0 25%;
		}

		.bar_container {
			position: absolute;
			height: 50px;
			width: 50%;
			top: 100px;
			margin: 0 auto;
			background-color: #644;
		}

		.bar {
			position: relative;
			top: 4px; left: 4px;
			height: calc(100% - 8px);
			width: 0;
			background-color: #855;

			overflow: hidden;

			-webkit-transition: width 250ms linear;
    	-moz-transition:    width 250ms linear;
    	-ms-transition:     width 250ms linear;
			-o-transition:      width 250ms linear;
    	transition:         width 250ms linear;
		}

		.percent_label {
			position: absolute;
			display: block;
			font-size: 40px;
		}
		.percent_label.outer {
			top: 4px;
			left: 8px;
			color: #ddd;
		}
		.percent_label.inner {
			top: 0px;
			left: 4px;
			color: #111;
		}
	</style>
	<script src="./jquery-2.1.3.min.js"></script>
	<script>
		function setPercent(bar, per) {
			var maxWidth = bar.parent().width() - 8
			var width = maxWidth * (per / 100)
			bar.width(width)
			bar.parent().find(".percent_label").html(parseFloat(per).toFixed(1)+"%")
		}

		$(function() {
			var bars = $(".bar")
			bars.each(function(index, element) {
				var bar = $(element)
				var percent = bar.data("percent")
				if (percent == undefined || percent < 0) {
					percent = 0
				}

				var auto = bar.data("auto")
				var rate = bar.data("rate")
				var incTime = bar.data("inctime")

				if ((auto != undefined && auto !== false) || (rate != undefined && rate > 0)) {
					if (rate == undefined || rate <= 0) {
						rate = 0.1
					}
					if (incTime == undefined || incTime < 0) {
						incTime = 50
					}

					var int = setInterval(function() {
						percent += rate
						if (percent >= 100) {
							percent = 100
							clearInterval(int)
						}
						setPercent(bar, percent)
					}, incTime)
				}

				setPercent(bar, percent)
			})
		})
	</script>
</head>
<body>
	<div class="bar_container">
		<span class="percent_label outer"></span>
		<div class="bar" data-percent="0" data-rate="5" data-inctime="2000">
			<span class="percent_label inner"></span>
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<title>Progress bar testing</title>
	<style>
	body {
	background-color: #444;
	margin: 0 25%;
	}

	.bar_container {
	position: absolute;
	height: 50px;
	width: 50%;
	top: 100px;
	margin: 0 auto;
	background-color: #644;
	}

	.bar {
	position: relative;
	top: 4px; left: 4px;
	height: calc(100% - 8px);
	width: 0;
	background-color: #855;

	overflow: hidden;

	-webkit-transition: width 250ms linear;
	-moz-transition: width 250ms linear;
	-ms-transition: width 250ms linear;
	-o-transition: width 250ms linear;
	transition: width 250ms linear;
	}

	.percent_label {
	position: absolute;
	display: block;
	font-size: 40px;
	}
	.percent_label.outer {
	top: 4px;
	left: 8px;
	color: #ddd;
	}
	.percent_label.inner {
	top: 0px;
	left: 4px;
	color: #111;
	}
	</style>
	<script src="./jquery-2.1.3.min.js"></script>
	<script>
	function setPercent(bar, per) {
	var maxWidth = bar.parent().width() - 8
	var width = maxWidth * (per / 100)
	bar.width(width)
	bar.parent().find(".percent_label").html(parseFloat(per).toFixed(1)+"%")
	}

	$(function() {
	var bars = $(".bar")
	bars.each(function(index, element) {
	var bar = $(element)
	var percent = bar.data("percent")
	if (percent == undefined \|\| percent < 0) {
	percent = 0
	}

	var auto = bar.data("auto")
	var rate = bar.data("rate")
	var incTime = bar.data("inctime")

	if ((auto != undefined && auto !== false) \|\| (rate != undefined && rate > 0)) {
	if (rate == undefined \|\| rate <= 0) {
	rate = 0.1
	}
	if (incTime == undefined \|\| incTime < 0) {
	incTime = 50
	}

	var int = setInterval(function() {
	percent += rate
	if (percent >= 100) {
	percent = 100
	clearInterval(int)
	}
	setPercent(bar, percent)
	}, incTime)
	}

	setPercent(bar, percent)
	})
	})
	</script>
	</head>
	<body>
	<div class="bar_container">
	<span class="percent_label outer"></span>
	<div class="bar" data-percent="0" data-rate="5" data-inctime="2000">
	<span class="percent_label inner"></span>
	</div>
	</div>
	</body>
	</html>