erycson/progressbar-page-load.html

## progressbar-page-load.html
<!DOCTYPE html>
<html>
  <head>
  	<link href="http://ricostacruz.com/nprogress/nprogress.css?t=4" rel="stylesheet" />
  	<script src="http://ricostacruz.com/nprogress/nprogress.js?t=4"></script>
    <script>
    	NProgress.start();
      let current = 2;
      let total = document.querySelectorAll('script, img, link').length;

      console.log('Iniciando: ', total);

    	var observer = new MutationObserver(moEvent => {
        moEvent.forEach(mr => {
          if (!mr.addedNodes.length) return;
          mr.addedNodes.forEach(el => {
          	// Só espera o carregamento dos elementos IMG, LINK e SCRIPT
            if (['SCRIPT', 'IMG', 'LINK'].indexOf(el.tagName) === -1) return;

            // Adiciona o evento para quando o elemento for carregado
            el.addEventListener('load', elEvent => {
              NProgress.set(++current / total);
            });
          });
        });
      });
      observer.observe(document, {
        attributes: false,
        childList: true,
        subtree: true
      });

      window.addEventListener('load', e => {
        console.log('Concluido: ', current);
        observer.disconnect();
        NProgress.done();
      });
    </script>
    <title>Page Title</title>
    <style>
    body {
        background-color: black;
        text-align: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js?3"></script>
    <script src="https://underscorejs.org/underscore.js?3"></script>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p>Edit the code in the window to the left, and click "Run" to view the result.</p>
    <img src="https://www.w3schools.com/tryit/avatar.png" alt="Avatar" style="width:200px">

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://ricostacruz.com/nprogress/nprogress.css?t=4" rel="stylesheet" />
	<script src="http://ricostacruz.com/nprogress/nprogress.js?t=4"></script>
	<script>
	NProgress.start();
	let current = 2;
	let total = document.querySelectorAll('script, img, link').length;

	console.log('Iniciando: ', total);

	var observer = new MutationObserver(moEvent => {
	moEvent.forEach(mr => {
	if (!mr.addedNodes.length) return;
	mr.addedNodes.forEach(el => {
	// Só espera o carregamento dos elementos IMG, LINK e SCRIPT
	if (['SCRIPT', 'IMG', 'LINK'].indexOf(el.tagName) === -1) return;

	// Adiciona o evento para quando o elemento for carregado
	el.addEventListener('load', elEvent => {
	NProgress.set(++current / total);
	});
	});
	});
	});
	observer.observe(document, {
	attributes: false,
	childList: true,
	subtree: true
	});

	window.addEventListener('load', e => {
	console.log('Concluido: ', current);
	observer.disconnect();
	NProgress.done();
	});
	</script>
	<title>Page Title</title>
	<style>
	body {
	background-color: black;
	text-align: center;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.js?3"></script>
	<script src="https://underscorejs.org/underscore.js?3"></script>
	</head>
	<body>

	<h1>This is a Heading</h1>
	<p>This is a paragraph.</p>
	<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
	<img src="https://www.w3schools.com/tryit/avatar.png" alt="Avatar" style="width:200px">

	</body>
	</html>