Barra Progresso
Às vezes, um número é o mais importante Uma meta de arrecadação de fundos, um marco do projeto, uma habilidade O Elemento Master Addons Progressbar faz dessa métrica única uma peça central visual Escolha entre vários estilos de engajamento Linha clássica, Círculo radial, designs únicos de Círculo e Bolha Defina seu valor objetivo e, em seguida, personalize cada parte É o elemento perfeito da barra de progresso do elemento para focar a atenção, visualizar a conclusão e motivar a ação em torno de um objetivo principal.
Várias predefinições de estilo visual
Um único número pode ser mostrado de várias maneiras Selecione o estilo visual que se encaixa na personalidade da sua página Escolha a barra de Linha simples e limpa para layouts horizontais Opte pelo Círculo por um medidor radial compacto Torne-o brincalhão com a forma do Ventilador ou adicione uma Bolha dinâmica que se mova com o estilo de progresso na linha Cada predefinição oferece uma maneira distinta de visualizar o avanço, garantindo que sua barra de progresso seja sempre parte integrante do design, não uma reflexão tardia.
- Quatro estilos distintos: escolha entre predefinições de linha, círculo, ventilador e bolha de linha.
- Radial vs. Linear: Use Círculo e Ventilador para indicadores de progresso compactos e radiais em espaços apertados.
- Bolha Animada: O estilo Bolha de Linha adiciona um ponto final móvel que destaca o valor atual.
Personalização de conteúdo e valor
Configurar sua barra de progresso é simples Na guia Conteúdo, dê-lhe um Título significativo como “Project Funding” ou “Customer Satisfaction.” Em seguida, defina o Valor (Value Funding”) a porcentagem importantíssima que define o quão cheia deve ser a barra ou círculo Este processo simples de duas etapas é tudo que você precisa para obter um indicador de progresso funcional e dinâmico ao vivo em sua página.
- Entrada Simples: Apenas dois campos: Título e Valor (Percentagem).
- Visualização ao vivo: veja a atualização do título e do valor percentual no editor enquanto digita.
- Exibição dinâmica: O preenchimento da barra, círculo ou ventilador se ajusta automaticamente à porcentagem exata inserida.
Estilo da barra de progresso
Estile a Barra Traseira (a pista vazia ou fundo) e a Barra Frontal (o preenchimento colorido) de forma independente Para a Barra Frontal, escolha a sua Cor e controle a sua Largura (ou espessura) Para a Barra Traseira, defina a sua própria cor e estilo Esta separação permite fazer com que o progresso avançado se destaque claramente contra o fundo, garantindo a máxima legibilidade e impacto visual.
- Estilo de barra dupla: Estilo a barra frontal (progresso) e a barra traseira (faixa) com cores completamente diferentes.
- Controle de Espessura: Ajuste a Largura do preenchimento de progresso, especialmente útil para os estilos de Linha e Círculo.
- Hierarquia Visual Clara: Use cores contrastantes para tornar a parte concluída instantaneamente óbvia.
Design de etiqueta e valor
Use as seções Título e design de estilo para projetar seu texto Defina o Título Color e escolha sua Tipografia (Typography) Valor, tamanho e peso (a porcentagem pode ser estilizada para dar ênfase, muitas vezes tornando-a maior ou mais ousada que o título Essa abordagem integrada garante que todos os elementos da sua barra de progresso pareçam um componente unificado e personalizado.
- Estilo específico de texto: controles separados para estilizar o rótulo do título e a porcentagem de valor.
- Controle de tipografia: Use o painel Tipografia para controle preciso da fonte sobre o texto do título.
- Ênfase no Número: Muitas vezes estilize o Valor para ser mais proeminente, chamando a atenção para a métrica principal.
Perguntas frequentes para a barra de progresso
Qual é a principal diferença entre este e o elemento "Progressbars" (grupo)?
Este elemento é para um único e destacado indicador de progresso Ele oferece predefinições de forma únicas (Círculo, Ventilador, Bolha) e é projetado para ser um ponto focal O Elemento ProgressBars é para criar listas ou grupos de várias barras (como uma lista de habilidades), tudo em um estilo linear semelhante.
A barra/círculo anima quando a página é carregada?
Sim, normalmente. Para envolver os visitantes, o preenchimento de progresso (Front Bar) deve animar de 0% até o seu valor definido quando o elemento entra em exibição na página, criando um efeito suave e dinâmico.
Posso usar o estilo Circle para mostrar uma pontuação de 100?
Absolutamente. o estilo Círculo (e Ventilador) é perfeito para isso Defina seu Valor para a pontuação (por exemplo, 85 para 85%).O elemento preencherá o arco radial de acordo, criando uma visualização clara de calibre ou classificação.
O "Bubble" no estilo Line Bubble é personalizável?
Sim. existe uma configuração de Cor de Bolha e Posição de Bolha Você pode alterar a cor da bolha e ajustar onde ela fica ao longo da pista em relação ao ponto final do preenchimento.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
