herusdianto · January 9, 2017 19:44
diff --git a/progress_second.html b/progress_second.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">

    <title>Progress Bar Every Second</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <style>
        .container {
            margin-top: 20%;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="current_progress" data-current="0">
                        0%
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-sm-offset-3 text-center">
                <span id="remaining"></span>
            </div>
        </div>
    </div>

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function()
        {
            var interval        = setInterval(updateProgress, 1000); // run updateProgress() every second

            var progress        = $('#current_progress'); // progress bar

            var current         = progress.data('current'); // data-current attribute value

            var remaining_span  = $('#remaining'); // remaining time span

            var max             = 100; // max progress bar width

            var time            = 60; // time in seconds

            var remaining       = parseFloat(max) - parseFloat(current); // calculate remaining of progress bar width

            var progress_second = remaining / time; // calculate percent of progress per second

            /**
             * update progress bar & remaining time
             *
             * @return void
             */
            function updateProgress()
            {
                var width = current + progress_second; // calculate width of progress bar

                current   = width; // set current width

                time     -= 1; // subtract time every second

                progress.data('current', width.toFixed(2)); // set data-current attribute value

                progress.css('width', width.toFixed(2) + '%'); // set progress bar width

                progress.text(width.toFixed(2) + '%'); // set progress text

                remaining_span.text(time); // set remaining time text

                // if progress bar width is 100% or more
                // then stop the interval
                if(width >= 100)
                {
                    clearInterval(interval);
                }
            }
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>Progress Bar Every Second</title>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<style>
	.container {
	margin-top: 20%;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-sm-6 col-sm-offset-3">
	<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="current_progress" data-current="0">
	0%
	</div>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="col-sm-6 col-sm-offset-3 text-center">
	<span id="remaining"></span>
	</div>
	</div>
	</div>

	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<script>
	$(document).ready(function()
	{
	var interval = setInterval(updateProgress, 1000); // run updateProgress() every second

	var progress = $('#current_progress'); // progress bar

	var current = progress.data('current'); // data-current attribute value

	var remaining_span = $('#remaining'); // remaining time span

	var max = 100; // max progress bar width

	var time = 60; // time in seconds

	var remaining = parseFloat(max) - parseFloat(current); // calculate remaining of progress bar width

	var progress_second = remaining / time; // calculate percent of progress per second

	/**
	* update progress bar & remaining time
	*
	* @return void
	*/
	function updateProgress()
	{
	var width = current + progress_second; // calculate width of progress bar

	current = width; // set current width

	time -= 1; // subtract time every second

	progress.data('current', width.toFixed(2)); // set data-current attribute value

	progress.css('width', width.toFixed(2) + '%'); // set progress bar width

	progress.text(width.toFixed(2) + '%'); // set progress text

	remaining_span.text(time); // set remaining time text

	// if progress bar width is 100% or more
	// then stop the interval
	if(width >= 100)
	{
	clearInterval(interval);
	}
	}
	});
	</script>
	</body>
	</html>