Usando e estilizando o medidor HTML5 [Guia]

Se você estiver familiarizado com a barra de progresso do HTML, que mostra quanto de uma atividade foi executada, você descobrirá que o elemento do medidor é semelhante a esse - ambos mostre um valor atual fora de um valor máximo. Mas, ao contrário da barra de progresso, a barra do medidor não deve ser usada para mostrar progresso.

É usado para mostrar um valor estático em um intervalo específico, por exemplo, você pode indicar o espaço de armazenamento usado em um armazenamento em disco mostrando quanto do espaço de armazenamento foi preenchido e quanto não é.

Além disso, o elemento medidor também pode ser usado para visualizar até três regiões dentro de seu alcance. Reutilizando o exemplo do espaço de armazenamento, em vez de mostrar apenas quanto espaço está ocupado, você também pode indicar visualmente se o espaço ocupado é preenchido apenas esparsamente (digamos, abaixo de 30%) ou quase pela metade (entre 30 e 60%) ou mais meio cheio (acima de 60%) usando cores diferentes. Isso ajuda os usuários a saberem quando estão atingindo o limite de armazenamento.

Nesta postagem, mostraremos a você como estilizar a barra do medidor para ambos os fins mencionados, isto é, calibre simples (sem regiões indicadas) e dois exemplos de medidores com 3 regiões indicadas por cores. Para este último, vamos trabalhar em criando um medidor de "marcas" por mostrar notas ruins, médias e boas, e um medidor de "pH" para mostrar valores de pH ácidos, neurais e alcalinos.

Atributos

Antes de começarmos com os exemplos e nos aprofundarmos, vamos dar uma rápida olhada em sua lista de atributos abaixo, mais sobre esses atributos, como seus padrões, etc., serão abordados nos exemplos.

valor - O valor do metro elemento
min - O valor mínimo do intervalo do medidor
máximo - O valor máximo do alcance do medidor
baixo - Indica o valor limite baixo
Alto - Indica o valor limite alto
ótimo - O ponto ótimo no intervalo

1. Styling A Simple Gauge

Aqui está um exemplo muito simples usando apenas um atributo, o valor. Antes de prosseguirmos, precisamos conhecer três coisas primeiro:

(1) Existe um padrão min e máximo valor que define o intervalo de metro, que é 0 e 1 respectivamente. (2) Se o usuário especificado valor não se enquadra no metro alcance, levará o valor de qualquer min ou máximo, seja qual for o mais próximo. (3) A tag Ending é obrigatória.

Aqui está a sintaxe:

0,5

Alternativamente, podemos também adicionar min e máximo atributos, portanto, fornecendo um intervalo definido pelo usuário da seguinte forma:

2. Estilizando o indicador "Marcas"

Primeiro, precisamos dividir o intervalo em três regiões (esquerda / baixa, média, direita / alta). Isso é onde baixo e Alto atributos entram em jogo. É assim que as três regiões são divididas.

As três regiões são formadas entre min E baixo , baixo E Alto e Alto E máximo.

Agora é óbvio que existem certas condições baixo e Alto valores devem seguir para as três regiões a serem formadas:

baixo não pode ser inferior a min e maior que Alto E máximo
Alto não pode ser maior que máximo e menos que baixo E min.
E quando um critério é quebrado ambos baixo e Alto assumirá o valor da outra variável nos critérios que não forem satisfeitos, isto é, se baixo valor é encontrado menor que min que não deveria ser, baixo vai ter o min valor.

Neste exemplo, consideraremos as três regiões da esquerda para a direita como:

Pobre: (0 a 33)
Média: (34-60)
Boa: (61-100)

Portanto, os seguintes são valores para os atributos; min = "0" low = "34" high = "60" max = "100".

Aqui está uma imagem visualizando as regiões.

Mesmo que haja três regiões no medidor que criamos agora, ele indicará apenas dois "tipos" de regiões em apenas duas cores no momento. Por quê? Porque ótimo está na região central.

Ponto ótimo

Em qualquer região (dos três) os ótimo ponto cai, é considerado como uma "região ideal" de cor verde por padrão. A (s) região (ões) imediatamente ao lado é chamada de "região sub-ótima" e é colorida de laranja. O mais distante é uma região "não muito boa", colorida em vermelho.

Até agora, no nosso exemplo, não atribuímos um valor para ótimo. Portanto, o valor padrão é 50, tornando a região intermediária a "região ideal" e as que estão próximas a ela (ambas à esquerda e à direita) como "regiões sub-ótimas"..

Em suma, no caso acima, qualquer valor para o metro o elemento que cai na região intermediária é indicado por verde; o resto laranja.

Não é isso que queremos. Nós queremos que seja colorido desta maneira: Pobre (vermelho), Média (laranja), Boa (verde)

Já que a região da direita deve ser considerada nossa região ideal, nós daremos ótimo um valor que cairá na região direita (qualquer valor entre 61-100, incluindo 61 e 100).

Estamos levando 90 para este exemplo. Isso tornará a região da direita "ótima", a do meio (sua próxima região próxima) "sub-ótima" e a mais à esquerda a região "não-muito-de-um-ótimo".

Isto é o que nós obteremos em nosso medidor.

2. Styling O medidor "pH"

Primeiro, um respiro nos valores de pH. Uma solução ácida tem um pH menor que 7, uma solução alcalina tem um pH maior que 7 e se você pousar em 7, essa é uma solução neutra.

Assim, usaremos os seguintes valores e atributos:

baixo = "7" , alto = "7", max = "14", e a min terá o valor padrão de zero.

Antes de adicionarmos o restante dos atributos para concluir o código, decidimos as cores: Ácido (vermelho), Neutro (branco) e Alcalino (azul). Vamos considerar também a região ácida (região esquerda abaixo de 7) como "ótima"

Aqui estão os pseudo-elementos do CSS que serão segmentados para obter o visual desejado Raposa de fogo. (Para os pseudo-elementos do medidor de webkit e mais, consulte os links listados em "referência".)

 .ph_meter fundo: lightgrey; largura: 300px;  .ph_meter: -moz-meter-optimal :: - moz-meter-bar fundo: indianred;  .ph_meter: -moz-meter-sub-optimal :: - moz-meter-bar fundo: antiquewhite;  .ph_meter: -moz-meter-sub-sub-óptimo :: - moz-meter-bar fundo: steelblue;

Aqui está o código html completo e o resultado final do medidor de pH.

Referências

Especificações do W5C do Medidor HTML5
Lista de pseudo-elementos e classes do webkit
Lista de pseudo-elementos específicos do fornecedor

Mais sobre Hongkiat: Criando e estilizando barra de progresso com HTML5