Nesta seção aprenderemos a usar elementos de loader, que são utilizados quando uma determinada tarefa está em processo de carregamento.
Spinner são elementos que ficam rodando infinitamente, que podem possui uma ou duas barras.
<div class="loader"></div>
<div class="loader bar-2"></div>
Progress Bar são elementos que podem ser usado quando dados são enviados ou recebidos podendo representa o status da tarefa. Veja abaixo um exemplo:
<div class="progress-bar">
<span style="width: 25%"></span>
</div>
É possível também alterar a cor da barra, para isso, basta adicionar o nome da cor como classe do elemento span
<div class="progress-bar">
<span class="green" style="width: 70%"></span>
</div>
Outra possibilidade da Progress Bar é deixar a barra de carregamento listrada. Veja um exemplo:
<div class="progress-bar stripes">
<span class="blue" style="width: 90%"></span>
</div>