Olá desenvolvedores, o assunto agora é progrees bar utilizando Javascript e jQuery, você irá aprender como implementar uma barra progressiva em sua aplicação web utilizando estes recursos de Front-End. Então sem mais delongas, vamos direto ao ponto.

Primeiramente iremos criar dentro da subpasta pages, a página JSP progresbar. E na página principal, index.jsp, dentro da tabela onde estamos inserindo os links de acesso as várias páginas do sistema, crie mais uma linha e uma célula.

E o legal deste tutorial é que iremos poder brincar um pouquinho mais com o CSS – Cascading Style Sheets. É a partir do css que iremos criar a barra de progresso. Assim, para esta implementação iremos utilizar o estilo de CSS incorporado, onde a folha de estilo é declarada diretamente dentro da tag head do documento HTML em questão.

CRIANDO A PROGRESS BAR COM CSS

Assim, dentro da tag <head> abra uma tag <style> é dentro deste par de tags que iremos escrever a estilização da barra de progresso. Estilizaremos também, além da barra de progresso em si, o caminho que ela irá percorrer até os 100%.

A barra de progresso terá uma altura de 30px e começará em 1%, e como comumente estamos habituados a ver, o background da progress bar terá uma tonalidade verde.

Dentro do body tanto o caminho que a progress bar percorrera quanto ela em si, estará cada um dentro de uma tag <div>. Porém a div da barra de progresso estará aninhada dentro da div que representa o caminho que ela irá percorrer.

E para iniciar o progresso da barra criaremos um botão que chamará a função de progresso.

Após estas implementações a página com a barra de progresso ficará como mostrado abaixo.

FUNÇÃO DE CARREGAMENTO

Na função javascript o primeiro passo é a criação de uma variável que receberá o id da div da progressbar. Depois implementaremos uma segunda variável representando a largura da página e que será inicializada com o valor 1.

Precisaremos de uma terceira variável que receberá o método setInterval que recebe com parâmetro uma função e a duração do intervalo do tempo entre cada execução da função, porém, esta repetição é contínua.

Chamaremos de frame a função que será executada pelo setInterval. E dentro dela implementaremos o progresso da barra. Dessa forma, se a largura da barra for maior ou igual a 100, a execução parará. Mas se não, a variável de controle será implementada, e a largura do div da progress bar será igual o tamanho da variável de controle, ou seja, crescerá continuamente.

EM POUCAS PALAVRAS

Teste o projeto e veja que a nossa implementação de uma barra progressiva utilizando Javascript está funcionando perfeitamente. É importante que mesmo que você seja um programador focado principalmente no back-end, conheça alguns dos recursos do Javascript que poderão acelerar sua produção. Eu fico por aqui e nós nos vemos no próximo tutorial.