doug65536/gist:6086115

## gistfile1.html
<html>
<head>
<title>Try chunked stream</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="progress_container" style="width: 123px; height: 20px; background-color: white; border: solid black 1px">
    <div id="progress_bar" style="width: 0px; height: 18px; background-color: white; border: solid blue 1px; background-color: blue">
	</div>
	<br style="clear:both"/>
</div>
<script type="text/javascript">
	$(function() {
		function update_progress_bar(bar, value)
		{
			var parent_width = bar.parent("div").width();
		    bar.css({width: value * parent_width / 100});
		}

		function start_progress_stream(request_url, bar_id)
		{
		    var xhr = new XMLHttpRequest();

		    xhr.onerror = function() {
		    	alert("Error!");
		    };

		    // Captured by onprogress closure below
		    var progress_ofs = 0;
		    var bar = $(bar_id);

		    xhr.onprogress = function () {
		        // Extract the just the new data
		        var new_progress = xhr.responseText.substr(progress_ofs);

		        // Update offset for next time
		        progress_ofs += new_progress.length;

		        // Use the new_progress string to update your progress bar...
		        update_progress_bar(bar, parseInt(new_progress, 10));
		    };

		    xhr.open("GET", request_url, true);
		}

		//update_progress_bar($("#progress_bar"), 75);
		start_progress_stream("http://localhost:8888/test", "#progress_bar");

	});
</script>
</body>
</html>
	<html>
	<head>
	<title>Try chunked stream</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	</head>
	<body>
	<div id="progress_container" style="width: 123px; height: 20px; background-color: white; border: solid black 1px">
	<div id="progress_bar" style="width: 0px; height: 18px; background-color: white; border: solid blue 1px; background-color: blue">
	</div>
	<br style="clear:both"/>
	</div>
	<script type="text/javascript">
	$(function() {
	function update_progress_bar(bar, value)
	{
	var parent_width = bar.parent("div").width();
	bar.css({width: value * parent_width / 100});
	}

	function start_progress_stream(request_url, bar_id)
	{
	var xhr = new XMLHttpRequest();

	xhr.onerror = function() {
	alert("Error!");
	};

	// Captured by onprogress closure below
	var progress_ofs = 0;
	var bar = $(bar_id);

	xhr.onprogress = function () {
	// Extract the just the new data
	var new_progress = xhr.responseText.substr(progress_ofs);

	// Update offset for next time
	progress_ofs += new_progress.length;

	// Use the new_progress string to update your progress bar...
	update_progress_bar(bar, parseInt(new_progress, 10));
	};

	xhr.open("GET", request_url, true);
	}

	//update_progress_bar($("#progress_bar"), 75);
	start_progress_stream("http://localhost:8888/test", "#progress_bar");

	});
	</script>
	</body>
	</html>