thinsoldier · April 11, 2016 07:45
diff --git a/google photos progress bar numbers b/google photos progress bar numbers
 // When you would rather see an accurate number instead of a progress bar:

 // http://jsbin.com/bomirabewa/2/edit?html,css,js,output

 //-----------------------------

 window.requestAnimationFrame(barmeasure);
 function barmeasure()
 {
 	document.querySelector('title').innerText = document.querySelector('.i9Crcb').style.transform.replace('translateX(','');
 	window.requestAnimationFrame(barmeasure);
 }



diff --git a/jsbin.css b/jsbin.css
 /*
 Before javascript does anything (or in the absence of javascript)
 the default state of the progress bar
 is to be as wide as the whole document
 (width:100%)
 but pulled all the way to the left so that it is initialy outside of the document and thus not visible
 (left:-100%)
 */
 .the_bar {
  background: green;
  height: 20px;
  border-radius: 5px;
  
  width: 100%;
  position: relative;
  left: -100%
 }

 .output {
  font-family:monospace;
  padding: 20px;
 }

 html{ padding-top: 40px;}
diff --git a/jsbin.html b/jsbin.html
 <!DOCTYPE html>
 <html>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

  <h4>When you would rather see an accurate number instead of a progress bar:</h4>
  
 <div class="the_bar wibe"> 
  the progress bar 
 </div>
  
 <div class="output">
  readout
 </div>
 
 </html>
diff --git a/jsbin.js b/jsbin.js
 // A variable referencing the progress bar object.
 barElement = $('.the_bar').get(0);

 // start at zero
 startingpoint = 0;

 // track position over time
 counter = startingpoint;

 // increase by this much every loop
 increment = 0.002;

 // Notice that none of my variables start with "var". This is to make sure I can use the variable "globally"


 // CodeCombat's "loop" is pretend to make things easier for beginners.
 // This is how it's actually done (in web browsers at least).
 // Whenever the browser program is about to start drawing a picture of itself
 // (remember my e-mail about frames per second) to send to the operating system
 // for display on screen we schedule in a function to run at the same time.
 window.requestAnimationFrame( progressbar_animation );


 // This function moves the progress bar to the right a tiny bit every few milliseconds
 function progressbar_animation()
 {
  // increase the counter slightly using the increment var value
  counter = counter + increment;
  
  // use the new counter value to tell the bar be in 
  // a slightly different location
  // when the next frame is generated
  barElement.style.transform = "translateX("+counter+"%)"; // "concatenation"

  // When the counter reaches 100% start over from zero
  if(counter > 100){counter=startingpoint;}
  
  // at the end of this function it schedules itself to run again 
  // at the next frame and the next frame and the next frame...
  window.requestAnimationFrame(progressbar_animation);
 }


 /*
 Now lets pretend all the code above is part of some other website where you are uploading a large file and you're not sure if the progress bar is actually moving...it's like watching grass grow. If I can figure out which value of the progress bar is changing over time, I can grab that value and show it. I'd rather know that the decimal points are increasing versus not knowing of the progress bar is actually moving or if it's just my imagination.

 This code is what I'd add to my browser console:
 */
 window.requestAnimationFrame(measure);
 function measure()
 {
  $('.output').get(0).innerHTML = barElement.style.transform;
  window.requestAnimationFrame(measure);
 }
	// When you would rather see an accurate number instead of a progress bar:

	// http://jsbin.com/bomirabewa/2/edit?html,css,js,output

	//-----------------------------

	window.requestAnimationFrame(barmeasure);
	function barmeasure()
	{
	document.querySelector('title').innerText = document.querySelector('.i9Crcb').style.transform.replace('translateX(','');
	window.requestAnimationFrame(barmeasure);
	}
	/*
	Before javascript does anything (or in the absence of javascript)
	the default state of the progress bar
	is to be as wide as the whole document
	(width:100%)
	but pulled all the way to the left so that it is initialy outside of the document and thus not visible
	(left:-100%)
	*/
	.the_bar {
	background: green;
	height: 20px;
	border-radius: 5px;

	width: 100%;
	position: relative;
	left: -100%
	}

	.output {
	font-family:monospace;
	padding: 20px;
	}

	html{ padding-top: 40px;}
	<!DOCTYPE html>
	<html>
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

	<h4>When you would rather see an accurate number instead of a progress bar:</h4>

	<div class="the_bar wibe">
	the progress bar
	</div>

	<div class="output">
	readout
	</div>

	</html>
	// A variable referencing the progress bar object.
	barElement = $('.the_bar').get(0);

	// start at zero
	startingpoint = 0;

	// track position over time
	counter = startingpoint;

	// increase by this much every loop
	increment = 0.002;

	// Notice that none of my variables start with "var". This is to make sure I can use the variable "globally"


	// CodeCombat's "loop" is pretend to make things easier for beginners.
	// This is how it's actually done (in web browsers at least).
	// Whenever the browser program is about to start drawing a picture of itself
	// (remember my e-mail about frames per second) to send to the operating system
	// for display on screen we schedule in a function to run at the same time.
	window.requestAnimationFrame( progressbar_animation );


	// This function moves the progress bar to the right a tiny bit every few milliseconds
	function progressbar_animation()
	{
	// increase the counter slightly using the increment var value
	counter = counter + increment;

	// use the new counter value to tell the bar be in
	// a slightly different location
	// when the next frame is generated
	barElement.style.transform = "translateX("+counter+"%)"; // "concatenation"

	// When the counter reaches 100% start over from zero
	if(counter > 100){counter=startingpoint;}

	// at the end of this function it schedules itself to run again
	// at the next frame and the next frame and the next frame...
	window.requestAnimationFrame(progressbar_animation);
	}


	/*
	Now lets pretend all the code above is part of some other website where you are uploading a large file and you're not sure if the progress bar is actually moving...it's like watching grass grow. If I can figure out which value of the progress bar is changing over time, I can grab that value and show it. I'd rather know that the decimal points are increasing versus not knowing of the progress bar is actually moving or if it's just my imagination.

	This code is what I'd add to my browser console:
	*/
	window.requestAnimationFrame(measure);
	function measure()
	{
	$('.output').get(0).innerHTML = barElement.style.transform;
	window.requestAnimationFrame(measure);
	}