CODEWITHSUNDEEP
javascripttwitter-bootstrapprogress-bar
user3402248
user3402248

Reputation: 469

Bootstrap 4- Progress Bar does not work on the browser

I am using Bootstrap v4.0.0-alpha.6. The code which I want to run works perfectly well on js fiddle but once I run it through the server, it does not display the progress bar. Any Ideas on where I am going wrong?

Here is a link to my JS Fiddle

The code below is a php page page that has bootstrap.

<!DOCTYPE HTML>

<html>

<head>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<script>


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


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

    if (percentVal == 100)
    {
       var link = document.getElementById('nav-ask');
link.style.display = 'none'
    }

}, 500);
</script>

</head>

<body>



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

Upvotes: 0

Views: 1022

Answers (1)

user2736738
user2736738

Reputation: 30926

When your script is run then the page is not ready. So just put the script below after the html loads. Then it works.

...
 <div class="row">
        <div class="col-md-12">
            <div class="progress"id="nav-ask">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
                </div>
                </div>

<script>
Your script here.
</script>
</body>

I have made the size to col-md-12 so that I can see it properly.

Alternative solution:-

as you are using jquery use 

$(document).ready(function(){
   your script
})

This saves you from placing your code at the bottom of the page to make it work.

Upvotes: 1

Related Questions