swathiPaipalle/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Add num dynamically">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.progress-bar {
    width: 100%;
    border: solid 1px yellow;
    background: #fff;
}

.progress-bar-fill {
    height: 15px;
    background: #659cef;
    width:10%;
    /*transition: width 250ms ease-in-out;*/
    transition: width 1s ease-in-out;
}
</style>
</head>
<body class="container">
  <div class="progress-bar">
    <div id='progress' class="progress-bar-fill" ></div>
  </div>
<script id="jsbin-javascript">
function add(arr){
 var add1 = arr.reduce(function(a,b){
   return a+b;
 });
  return add1;
}

var arr = [1,2,3,4,5];
//console.log(add(arr));


// $('.progress-bar-fill').delay(1000).queue(function () {
//   $(this).css('width', '100%')
// });

var bar = document.getElementById('progress');

var width=0;
var progress = setInterval(function(){
  width+=10;
  bar.style.width=width+'%';

  if(width>100){
     clearInterval(progress);
     }
}, 1000);
</script>


<script id="jsbin-source-css" type="text/css">.progress-bar {
    width: 100%;
    border: solid 1px yellow;
    background: #fff;
}

.progress-bar-fill {
    height: 15px;
    background: #659cef;
    width:10%;
    /*transition: width 250ms ease-in-out;*/
    transition: width 1s ease-in-out;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
function add(arr){
 var add1 = arr.reduce(function(a,b){
   return a+b;
 });
  return add1;
}

var arr = [1,2,3,4,5];
//console.log(add(arr));


// $('.progress-bar-fill').delay(1000).queue(function () {
//   $(this).css('width', '100%')
// });

var bar = document.getElementById('progress');

var width=0;
var progress = setInterval(function(){
  width+=10;
  bar.style.width=width+'%';

  if(width>100){
     clearInterval(progress);
     }
}, 1000);

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

## jsbin.zuqukug.css
.progress-bar {
    width: 100%;
    border: solid 1px yellow;
    background: #fff;
}

.progress-bar-fill {
    height: 15px;
    background: #659cef;
    width:10%;
    /*transition: width 250ms ease-in-out;*/
    transition: width 1s ease-in-out;
}

## jsbin.zuqukug.js
function add(arr){
 var add1 = arr.reduce(function(a,b){
   return a+b;
 });
  return add1;
}

var arr = [1,2,3,4,5];
//console.log(add(arr));


// $('.progress-bar-fill').delay(1000).queue(function () {
//   $(this).css('width', '100%')
// });

var bar = document.getElementById('progress');

var width=0;
var progress = setInterval(function(){
  width+=10;
  bar.style.width=width+'%';

  if(width>100){
     clearInterval(progress);
     }
}, 1000);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Add num dynamically">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.progress-bar {
	width: 100%;
	border: solid 1px yellow;
	background: #fff;
	}

	.progress-bar-fill {
	height: 15px;
	background: #659cef;
	width:10%;
	/transition: width 250ms ease-in-out;/
	transition: width 1s ease-in-out;
	}
	</style>
	</head>
	<body class="container">
	<div class="progress-bar">
	<div id='progress' class="progress-bar-fill" ></div>
	</div>
	<script id="jsbin-javascript">
	function add(arr){
	var add1 = arr.reduce(function(a,b){
	return a+b;
	});
	return add1;
	}

	var arr = [1,2,3,4,5];
	//console.log(add(arr));


	// $('.progress-bar-fill').delay(1000).queue(function () {
	// $(this).css('width', '100%')
	// });

	var bar = document.getElementById('progress');

	var width=0;
	var progress = setInterval(function(){
	width+=10;
	bar.style.width=width+'%';

	if(width>100){
	clearInterval(progress);
	}
	}, 1000);
	</script>


	<script id="jsbin-source-css" type="text/css">.progress-bar {
	width: 100%;
	border: solid 1px yellow;
	background: #fff;
	}

	.progress-bar-fill {
	height: 15px;
	background: #659cef;
	width:10%;
	/transition: width 250ms ease-in-out;/
	transition: width 1s ease-in-out;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">
	function add(arr){
	var add1 = arr.reduce(function(a,b){
	return a+b;
	});
	return add1;
	}

	var arr = [1,2,3,4,5];
	//console.log(add(arr));


	// $('.progress-bar-fill').delay(1000).queue(function () {
	// $(this).css('width', '100%')
	// });

	var bar = document.getElementById('progress');

	var width=0;
	var progress = setInterval(function(){
	width+=10;
	bar.style.width=width+'%';

	if(width>100){
	clearInterval(progress);
	}
	}, 1000);

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