Barra de progresso com bootstrap

[fabiohdpaiva 0]

Pessoal, preciso muito da ajuda de vocês. Sou leigo em javascript.

Tenho um formulário que envia dados para o banco e faz upload de imagens ao mesmo tempo. Tudo em PHP... até tudo funcionando perfeitamente.

Tenho um código pronto que faz aparecer uma barra de progresso do bootstrap e funciona direitinho. Abaixo o código dela:

function enviar() {
var container = document.createElement("span");
container.innerHTML = "<h3>Aguarde! Carregando...</h3><div class='progress progress-striped progress-success active'><div class='bar' style='width: 100%;'></div></div>"; // coloque a url da sua imagem
var add_input_div = document.getElementById('loading');
add_input_div.appendChild(container);
document.form1.submit();
}

Porém eu preciso fazer a mesma coisa com uma barra de progresso mais apresentável com o percentual e não faço a mínima idéia de como fazer. Já tenho o código HTML dela:

<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar"aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span style="font-size:16px; font-weight:bold">50%</span>
</div>
</div>

Alguém pode me ajudar com isso por favor?