Progress Bar

Utilize o componente Barra de Progresso para indicar visualmente o avanço de uma tarefa ou processo em curso. Este componente é essencial para manter os utilizadores informados sobre o status de operações que levam tempo, como carregamento de arquivos, processamento de dados ou etapas de um fluxo de trabalho.

Características Principais

Indicador Visual

Mostra claramente o progresso atual, proporcionando feedback imediato sobre o avanço da tarefa.

Interatividade

Pode incluir rótulos que indicam porcentagens ou etapas específicas, oferecendo uma compreensão detalhada do progresso.

Variedade de Estilos

Pode ser configurado para diferentes estilos e tamanhos, adaptando-se ao design da interface e ao contexto da aplicação.

Exemplo de Utilização

• Processamento de dados em aplicações de análise ou relatórios.

Incorpore o componente Barra de Progresso sempre que precisar fornecer uma indicação visual clara e imediata do avanço de uma tarefa, melhorando a transparência e a satisfação do utilizador com a experiência da interface.

                                                    
<div class="gra-progress-bar" data-progress-default="50">
    <span class="progressPercentage"></span>
    <div class="progress-bar-container">
        <div class="progress-bar"></div>
    </div>
    <label for="default" class="gra-margin-top-xs">Progresso</label><br>
    <input class="form form-control progressInput" type="text" placeholder="Experimente um valor de 0 a 100">
</div>
                                                    
                                                

                                                    
<div class="gra-progress-bar" data-progress-default="75">
    <span class="progressPercentage"></span>
    <div class="progress-bar-container error">
        <div class="progress-bar"></div>
    </div>
    <label for="default" class="gra-margin-top-xs">Progresso</label><br>
    <input class="form form-control progressInput" type="text" placeholder="Experimente um valor de 0 a 100">
</div>