2

I've seen this page from w3school for progress bars. I am new to bootstrap and for web programming. It is possible to make it 100% in just 5 seconds?. Like a loading progress bar.

What is a correct way to do it?

MWiesner
  • 8,868
  • 11
  • 36
  • 70
TraF TraF TraF
  • 47
  • 2
  • 3
  • 14
  • 1
    Here's a similar question on bootstrap progress bar..http://stackoverflow.com/questions/21182058/dynamically-change-bootstrap-progress-bar-value-when-checkboxes-checked – Hussain Patel Oct 21 '16 at 02:48

2 Answers2

3

Here is a possible solution using twitter bootstrap and jQuery.

Fiddler: https://jsfiddle.net/f6hLt9ak/2/

I have used window.setInterval to set the value for progress-bar every half second. Once the progress bar reaches 100%, I am resetting the value back to 0.

HTML:

<div class="row">
        <div class="col-xs-8">
            <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
        </div>
    </div>

JS

var progressBar = $('.progress-bar');
var percentVal = 0;

window.setInterval(function(){
    percentVal += 10;
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100)
    {
        percentVal = 0;      
    }

}, 500);

I hope this code sample will give you an idea on how to proceed at your end.

JGV
  • 5,037
  • 9
  • 50
  • 94
  • Can this be possible if the progress bar is 100% it will stop and do something... – TraF TraF TraF Nov 22 '16 at 09:05
  • Yes, it will possible. Once the progress bar reaches 100% (you can detect that using percentVal variable value), stop the setInterval using clearInterval function and then perform the next desired action. Let me know if you have further questions. – JGV Nov 22 '16 at 13:57
3

If you are confused to add a progress bar.Try automated progress bar

Pace.Js

Pace is really simple to integrate with web pages.

Add/Copy Stylesheet on your webpage

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.css">

And add JS file

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>

Sit back Rest of the things Pace will do

Rajeev Radhakrishnan
  • 954
  • 9
  • 17