Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
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. |
1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="100" class="ls-right-percentage"></div>
1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="100" class="ls-left-percentage"></div>
1
<div data-ls-module="progressBar" role="progressbar" aria-valuenow="80" class="ls-animated"></div>