CODEWITHSUNDEEP
javascriptjquerycss
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

Add text messages with Progress Bar

So, I'm trying to add two text messages above the Progress bar.

I want the copy 'Checking your answers!' right above the progress bar while it's progressing.

Then I want 'Approved!' to replace the 'Checking your answers!' as soon as the bar reaches 100%.

Below is the code I have implemented for my bar.

EX

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css'>

JS

var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width()+40);
    }
    $bar.text($bar.width()/4 + "%");
}, 900);

Mark-Up

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;"></div>

Upvotes: 0

Views: 386

Answers (1)

ChrisP
ChrisP

Reputation: 5952

Here is an option:

var progress = setInterval(function() {
  var $bar = $('.bar');
  if ($bar.width()==400) {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#announcement").text("Approved!");
  } else {
      $bar.width($bar.width()+40);
  }
  $bar.text($bar.width()/4 + "%");
}, 900);

With this HTML:

<div id="announcement">Checking your answers!</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>

Here is a demo.

Upvotes: 2

Related Questions