Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Barra de Progresso

Exibe o status de um processo

Você não precisa fazer muita coisa para barra de progresso funcionar. Basta inserir um div com os respectivos atributos pra ela funcionar automaticamente. A variação do progresso pode ser feito via Back-end ou JavaScript, sempre manipulando os valores dos atributos.

1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="60"></div>

O atributo data-ls-module="progressBar" carrega o módulo da barra de progresso, fazendo com que nosso script leia o valor no atributo aria-valuenow, inserindo uma indicação de porcentagem dentro da barra. O atributo role="progressbar" é necessário para WAI-ARIA.

Atributos e Classes Descrição
data-ls-module="progressBar" Parâmetro utilizado para criar a barra de progresso.
aria-valuenow Parâmetro utilizado para colocar a porcentagem atual da barra.
.ls-right-percentage Alinha o percentual da barra de progresso ao lado direito.
.ls-left-percentage Alinha o percentual da barra de progresso ao lado esquerdo.

Alinhando o percentual a direita.

1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="100" class="ls-right-percentage"></div>

Alinhando o percentual a esquerda.

1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="100" class="ls-left-percentage"></div>

Deixando a barra animada.

1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="80" class="ls-animated"></div>