Como podemos ajudar?

FC 15033 :: Como mostrar barra de progresso ao carregar uma página?

Uma linha azul será mostrada junto à barra de endereço do navegador. Esta linha cresce à medida que a página carrega.

A barra de progresso é um elemento exibido somente durante o carregamento das páginas. Esta linha é utilizada pelo Google e por muitos outros sites para que o visitante tenha um feedback visual do progresso de carregamento da página. Isto contribui para que o visitante aguarde pela carga completa da página.

Veja o procedimento para incluir barra de progresso:

1º Passo

Acesse o site do NProgress.js e clique no botão Download.

2º Passo

Clique no botão Clone or download para abrir as opções e clique em Download Zip.

3º Passo

Descompacte o arquivo nprogress-master.zip

4º Passo

Envie o arquivo nprogress.css para a subpasta CSS da pasta HTM.

OBS: Caso a loja não tenha uma pasta CSS, crie uma dentro da pasta HTM.

5º Passo

Envie o arquivo nprogress.js para a pasta JS.

Obs: Caso a loja não tenha uma pasta JS, crie uma dentro da pasta HTM.

6º Passo

Copie e cole o seguinte script no final do arquivo lojalib.js

/* Progress Bar */
function fnProgressBarLoading(){
NProgress.start();
window.addEventListener("load",function(event){
NProgress.done();
});
}

7º Passo

Copie e cole o código abaixo no final do arquivo rodape.htm

<!-- Progress Bar -->
<link rel="stylesheet" href="<PathTo file="htm/css/nprogress.css">">
<script src="<PathTo file="htm/js/nprogress.js">"></script>
<script>fnProgressBarLoading();</script>

8º Passo

Limpe o cache da loja e acesse a loja para ver sua barra de progresso.