stefanvermaas/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.progress {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  background-color: green;
}

.progress p {
  padding-top: 250px;
  text-align: center;
  color: white;
  font-size: 50px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
  <span class="progress" id="progress-bar"></span>
<script id="jsbin-javascript">
var req, updateProgress;

document.addEventListener('DOMContentLoaded', function() {

  // Show the progress of the XML request
  updateProgress = function(event) {
    if(event.lengthComputable) {
      var percentComplete = ( event.loaded / event.total ) * 100,
          progress = document.getElementById('progress-bar');

      // Do some awesome things
      progress.style.width = parseInt(percentComplete, 10) + "%";
      if( parseInt(percentComplete, 10) === 100 ) {
        progress.innerHTML = '<p>Done!</p>';
      }
    }
  };

  // Create a new XML request
  req = new XMLHttpRequest();
  req.open('GET', 'http://jsonplaceholder.typicode.com/comments', true);
  req.setRequestHeader('Cache-Control', 'no-cache');
  req.addEventListener('progress', updateProgress, false);
  req.send();
});
</script>


<script id="jsbin-source-css" type="text/css">.progress {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  background-color: green;
}

.progress p {
  padding-top: 250px;
  text-align: center;
  color: white;
  font-size: 50px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var req, updateProgress;

document.addEventListener('DOMContentLoaded', function() {

  // Show the progress of the XML request
  updateProgress = function(event) {
    if(event.lengthComputable) {
      var percentComplete = ( event.loaded / event.total ) * 100,
          progress = document.getElementById('progress-bar');

      // Do some awesome things
      progress.style.width = parseInt(percentComplete, 10) + "%";
      if( parseInt(percentComplete, 10) === 100 ) {
        progress.innerHTML = '<p>Done!</p>';
      }
    }
  };

  // Create a new XML request
  req = new XMLHttpRequest();
  req.open('GET', 'http://jsonplaceholder.typicode.com/comments', true);
  req.setRequestHeader('Cache-Control', 'no-cache');
  req.addEventListener('progress', updateProgress, false);
  req.send();
});

</script></body>
</html>

## jsbin.tuyakududuhu.css
.progress {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  background-color: green;
}

.progress p {
  padding-top: 250px;
  text-align: center;
  color: white;
  font-size: 50px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}

## jsbin.tuyakududuhu.js
var req, updateProgress;

document.addEventListener('DOMContentLoaded', function() {

  // Show the progress of the XML request
  updateProgress = function(event) {
    if(event.lengthComputable) {
      var percentComplete = ( event.loaded / event.total ) * 100,
          progress = document.getElementById('progress-bar');

      // Do some awesome things
      progress.style.width = parseInt(percentComplete, 10) + "%";
      if( parseInt(percentComplete, 10) === 100 ) {
        progress.innerHTML = '<p>Done!</p>';
      }
    }
  };

  // Create a new XML request
  req = new XMLHttpRequest();
  req.open('GET', 'http://jsonplaceholder.typicode.com/comments', true);
  req.setRequestHeader('Cache-Control', 'no-cache');
  req.addEventListener('progress', updateProgress, false);
  req.send();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.progress {
	position: absolute;
	top: 0;
	left: 0;

	height: 100%;
	background-color: green;
	}

	.progress p {
	padding-top: 250px;
	text-align: center;
	color: white;
	font-size: 50px;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body>
	<span class="progress" id="progress-bar"></span>
	<script id="jsbin-javascript">
	var req, updateProgress;

	document.addEventListener('DOMContentLoaded', function() {

	// Show the progress of the XML request
	updateProgress = function(event) {
	if(event.lengthComputable) {
	var percentComplete = ( event.loaded / event.total ) * 100,
	progress = document.getElementById('progress-bar');

	// Do some awesome things
	progress.style.width = parseInt(percentComplete, 10) + "%";
	if( parseInt(percentComplete, 10) === 100 ) {
	progress.innerHTML = '<p>Done!</p>';
	}
	}
	};

	// Create a new XML request
	req = new XMLHttpRequest();
	req.open('GET', 'http://jsonplaceholder.typicode.com/comments', true);
	req.setRequestHeader('Cache-Control', 'no-cache');
	req.addEventListener('progress', updateProgress, false);
	req.send();
	});
	</script>


	<script id="jsbin-source-css" type="text/css">.progress {
	position: absolute;
	top: 0;
	left: 0;

	height: 100%;
	background-color: green;
	}

	.progress p {
	padding-top: 250px;
	text-align: center;
	color: white;
	font-size: 50px;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var req, updateProgress;

	document.addEventListener('DOMContentLoaded', function() {

	// Show the progress of the XML request
	updateProgress = function(event) {
	if(event.lengthComputable) {
	var percentComplete = ( event.loaded / event.total ) * 100,
	progress = document.getElementById('progress-bar');

	// Do some awesome things
	progress.style.width = parseInt(percentComplete, 10) + "%";
	if( parseInt(percentComplete, 10) === 100 ) {
	progress.innerHTML = '<p>Done!</p>';
	}
	}
	};

	// Create a new XML request
	req = new XMLHttpRequest();
	req.open('GET', 'http://jsonplaceholder.typicode.com/comments', true);
	req.setRequestHeader('Cache-Control', 'no-cache');
	req.addEventListener('progress', updateProgress, false);
	req.send();
	});

	</script></body>
	</html>