Criando barra de progresso em JS + JQuery + CSS

Olá pessoal ! Hoje vou ensinar a fazer uma barra de progresso em Jquery + css !

Vamos ao código HTML primeiro:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> <div class='divnorm'> <div id='barra' class='divbarra'> 0% </div> </div>
Como podem ver temos duas Div's e um script a tag Script está inserindo o JQuery no nosso código e
sem ele não funcionaria nosso código no centro de tudo termos '0%' ele é dispensável
o que acontece aqui é que vamos usar uma div para ser o tamanho total da barra
e a outra div vai ser o quanto já foi preenchido
no caso, a classe 'divnorm' é para a barra no tamanho total e 'divbarra' é a barra
que está sendo preenchida
Nosso CSS COMENTADO:
.divnorm{/*Criamos a classe divnorm*/ width: 85%;/*Dizemos que ela terá 85% do tamanho total da página (para modificar basta alterar o valor porém mantenha o simbolo de porcentagem*/ border: 1px solid;/*dizemos que a borda terá 1px de largura e será sólida (não colocamos cor então ela será preta) caso queira basta adicionar a cor em Hexadecimal após o 'solid' e antes do ponto e virgula*/ border-radius: 5px;/*Arredondamos a borda em 5px*/ background-color: #d9d9d9;/*Colocamos a cor cinza no fundo da div */ } .divbarra{/*criamos a classe divbarra*/ width: 0px;/*dizemos que a barra tem 0px de tamanho (a barra começa vazia)*/ background-color: #008000;/*Damos a cor verda a barra que está preenchendo a outra div*/ border-radius: 5px;/*arredondamos as bordas da barra para ficar com o mesmo design da barra vazia*/ text-align: right;/*Alinhamos o texto ao final do preenchimento*/ color: #FFF;/*Damos a cor branca no texto*/ }
E finalmente nosso JavaScript / JQuery comentado !:
<script type="text/javascript"> atualizar(0);//chama a função atualizar pela primeira vez function atualizar(progresso){//Inicio da função recebendo um parametro chamado de progresso document.getElementById('barra').innerHTML = progresso+"%";//escrevemos a porcentagem dentro de nossa barra de progresso var progresso2 = progresso+"%";//Adicionamos um simbolo de porcentagem ao final do valor total da barra (se não fizer isso os valores serão tratados como pixels e não porcento) $(function(){//Inicio da função em JQuery $( "#barra" ).animate({//Dizemos que vamos usar o parâmetro Animate na div de id 'barra' width: progresso2},//Dizemos que vamos animar a largura da barra e que ela terá o valor da variavel progresso2 (que contém o valor da porcentagem com o simbolo de porcento no final) 500, function() {//Essa parte é delicada, o 500 ali é o tempo, 500 = 0.5s (meio segundo) e o Function(){ é uma função que será executada ao fim da animação var progresso3 = parseInt(progresso2.replace("%",""));//Descartável, essa parte serve apenas para pegar o valor em % e somar 1 nela, se você for usar em um código que já tenha limitador de porcentagem e modifique o valor, você pode apagar deste código até o fim do else if(progresso3<100){ progresso3 = progresso3+1; atualizar(progresso3);//essa parte é intessante deixar, pois ela quem chama novamente a função toda passando o novo valor de porcentagem para que a barra continue crescendo }else{ alert("Upload concluido com sucesso");//apenas uma mensagem para conclusão do progresso }//Fim do Else }); }); } </script>
Vamos aos testes ! (coloquei um botão porque não deve ser legal ganhar uma mensagem na cara enquanto lê rs)

0%

É isso pessoal, nada difícil viram? Duvidas comentários e afins nos comentários abaixo por favor