gusreyes01/mario.html

## mario.html
<html>

<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
	<script>
	  var socket = io('http://localhost:8282');
	  socket.on('change', function (data) {
	    console.log(data);
	  });
	</script>

	<style>
		body {
			background-color: black;
				font-family: Myriad Pro;
				text-transform: uppercase;

		}
		#counter {
			color: #fff;
			font-size: 60px;
		}
		#meta {
			color: #fff;
		}
	</style>
</head>

<body>
<div id="progress-div">
	<div id="counter">0</div>
	<div id="container">0%</div>
</div>


</body>
<script type="text/javascript">

	// Seconds 367200

	var bar = new ProgressBar.Line(container, {
	  strokeWidth: 1,
	  easing: 'easeInOut',
	  duration: 1400,
	  color: 'url(#gradient)',
	  trailColor: '#282828',
	  trailWidth: 0.5,
	  svgStyle: {width: '100%', height: '5%'},
	  text: {
	    style: {
	      // Text color.
	      // Default: same as stroke color (options.color)
	      color: '#fff',
	      position: 'absolute',
	      right: '0',
	      top: '30px',
	      padding: 0,
	      margin: 0,
	      transform: null
	    },
	    autoStyleContainer: false
	  },
	  from: {color: '#5885f3'},
	  to: {color: '#ED6A5A'},
	  step: (state, bar) => {
	    bar.setText(Math.round(bar.value() * 100) + ' %');
	  }
	});


let linearGradient = `
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#a229bc"/>
      <stop offset="50%" stop-color="#ff3f49"/>
    </linearGradient>
  </defs>
`

bar.text.style.fontSize = '2rem';
// append the linearGradient to svg
bar.svg.insertAdjacentHTML('afterbegin', linearGradient);


	function countdown(index, count){
		// Incrementos
		var acel = 1;
		var iniVal = 94;
		var endVal = 114;
		var val = (Math.floor(Math.random() * endVal) + iniVal)*acel;
		if (val % 3 != 0){
			var percent = Math.round(index/count * 100)
	    	$('#counter').html(index);

	    	sumindex = index + val
	    	jQuery({ Counter: index }).animate({ Counter: sumindex }, {
			  duration: 2000,
			  easing: 'swing',
			  step: function () {
			  	index = sumindex;
			    $('#counter').html(Math.ceil(this.Counter));
			  }
			});
		}

	    if(index <= count){
		    	bar.animate(index/count);
		        setTimeout("countdown("+index+','+count+")", 3000);
        }else{

        		$('#progress-div').html('<h1 id="meta">¡Muchas gracias! <br>Llegamos a la meta<h1>').hide().fadeIn(5000);

		}

}


	$(document).ready(function (){
		countdown(0, 1000);
	});
	</script>

</html>
	<html>

	<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
	<script>
	var socket = io('http://localhost:8282');
	socket.on('change', function (data) {
	console.log(data);
	});
	</script>

	<style>
	body {
	background-color: black;
	font-family: Myriad Pro;
	text-transform: uppercase;

	}
	#counter {
	color: #fff;
	font-size: 60px;
	}
	#meta {
	color: #fff;
	}
	</style>
	</head>

	<body>
	<div id="progress-div">
	<div id="counter">0</div>
	<div id="container">0%</div>
	</div>


	</body>
	<script type="text/javascript">

	// Seconds 367200

	var bar = new ProgressBar.Line(container, {
	strokeWidth: 1,
	easing: 'easeInOut',
	duration: 1400,
	color: 'url(#gradient)',
	trailColor: '#282828',
	trailWidth: 0.5,
	svgStyle: {width: '100%', height: '5%'},
	text: {
	style: {
	// Text color.
	// Default: same as stroke color (options.color)
	color: '#fff',
	position: 'absolute',
	right: '0',
	top: '30px',
	padding: 0,
	margin: 0,
	transform: null
	},
	autoStyleContainer: false
	},
	from: {color: '#5885f3'},
	to: {color: '#ED6A5A'},
	step: (state, bar) => {
	bar.setText(Math.round(bar.value() * 100) + ' %');
	}
	});


	let linearGradient = `
	<defs>
	<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
	<stop offset="20%" stop-color="#a229bc"/>
	<stop offset="50%" stop-color="#ff3f49"/>
	</linearGradient>
	</defs>
	`

	bar.text.style.fontSize = '2rem';
	// append the linearGradient to svg
	bar.svg.insertAdjacentHTML('afterbegin', linearGradient);



	function countdown(index, count){
	// Incrementos
	var acel = 1;
	var iniVal = 94;
	var endVal = 114;
	var val = (Math.floor(Math.random() * endVal) + iniVal)*acel;
	if (val % 3 != 0){
	var percent = Math.round(index/count * 100)
	$('#counter').html(index);

	sumindex = index + val
	jQuery({ Counter: index }).animate({ Counter: sumindex }, {
	duration: 2000,
	easing: 'swing',
	step: function () {
	index = sumindex;
	$('#counter').html(Math.ceil(this.Counter));
	}
	});
	}

	if(index <= count){
	bar.animate(index/count);
	setTimeout("countdown("+index+','+count+")", 3000);
	}else{

	$('#progress-div').html('<h1 id="meta">¡Muchas gracias! <br>Llegamos a la meta<h1>').hide().fadeIn(5000);

	}

	}


	$(document).ready(function (){
	countdown(0, 1000);
	});
	</script>

	</html>