Como montar isso com css(sass)?

[taylor4tw]

[dougaraujos]

Cara, fiz esse Gauge com SASS, só que 180º.
Mas no próprio Codepen tem vários exemplos

[brunomosciatti]

@dougaraujos acho que gauge é mais próximo de um medidor de combustível ou algo do gênero e ficaria só metade... preciso da circunferencia completa =/

[felipefialho]

Mano, da pra fazer de boa com mixins.

Estava procurando um que criei ano passado, mas o @dougaraujos passou uma lista com vários do CodePen, só escolher o que mais agrada, haha

[brunomosciatti]

Como disse anteriormente, os que o @dougaraujos passou são apenas 50% da circunferencia

[dougaraujos]

@brunomosciatti Com css você conseguiria ajustar o mixin que eu mostrei para replicar o elemento e transformá-lo em 360º. Mas, dependendo da complexidade que vc queira (se vai precisar incrementar outros elementos e animações, por exemplo) sugiro que você opte por uma implementação com canvas ou svg

[brunomosciatti]

@dougaraujos valeu pela resposta; na real eu nem precisaria da animação, seria algo bem simples como no print que mandei - nao encontrei no seu codepen alguma forma de transformá-lo em 360 :/

[leticiacostadias]

@brunomosciatti outra possibilidade é fazer com svg, como o @dougaraujos sugeriu. Algo como a lea verou explica

[dougaraujos]

@brunomosciatti Dá uma olhada aqui, fiz o fork e esbocei a ideia.

(perdão pelo código, não estou com tempo de limpar e fazer uma solução organizada)

[brunomosciatti]

legal @dougaraujos ! Show de bola! Mas como posso mudar o tamanho da barra? Preciso de algo fácil, como por exemplo pegar pela classe : span class="calorias--50" e que o 50 fosse o valor em porcentagem, algo assim:
https://codepen.io/StephenScaff/pen/xGPYbY
https://codepen.io/TheJaredWilcurt/pen/apXgyp

mas se tivesse como fazer sem JS seria melhor ainda, senão posso usar estes exemplos mesmo

[dougaraujos]

@brunomosciatti Você teria que usar algum elemento ao invés de before e after para fazer a barra. Assim poderia alterar o tamanho via JS. Mas ainda sim, a complexidade é desnecessária, porque você teria que calcular 360º em porcentagem e distribuir em cada metade.

Esse mixin fiz para um componente específico de até 180º. Nesse caso opte por um desses exemplos, muito mais funcionais.