How to design performance meter
Hi , am trying to figure out on how to design a component , which shows performance meter based on value given. The meter color goes with gradient .
please guide me !
17 Replies
"easiest" way here is a svg that has a layer with the full colored gradient already in it with a mask that shows a part of it. depending on what the actual thing looks like, you can maybe do it with css to set the value, but maybe you'll need js.
it is possible to do the whole thing in css, but based on this design, that's a lot of elements
The meter color goes with gradientI’m not understanding what your actual goal is. I understand that something spins but could you give a screenshot of the expected appearance? If it’s just blocks you can just select each block and recolour them. I would expect a needle type thing but the middle is covered and it might look a bit weird. Just not sure what you want the end result to look like
Am trying to achieve something like this, except the color orange in my requirement is a gradient which differs on value. please let me know know if it still not understandable.
Just for reference , not my expected output
would be nice to know the expected output. because there are different approaches
for example, i've made this a while ago https://codepen.io/MarkBoots/pen/mdjgzmz
If you are using a component library, you might have something like https://chakra-ui.com/docs/components/circular-progress . In that case, you can set a style property with a css gradient, maybe. In Chakra, there is a .track and .filledTrack property.
Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.
Circular Progress
Circular Progress is used to indicates the progress for determinate and indeterminate processes.
For something that fits your images though, I agree maybe you'll need to make some SVG template
i have an idea so horrible that it might just work
it is very complicated, but oh well
the idea is to use a ::before with the orange color, and an ::after
wait, nevermind, just implement it in svg
if you want a less interesting version of that, you can do something like the screenshot
you might be able to implement this, without rounded edges, with some tricks
and yes, im not good at math
Before creating one, i've checked codepen. And look at that:
https://codepen.io/yichinweng/pen/WNvXevO
interesting
(I know it's not your pen) Also worth noting rather than hard coding
198 you can select the path element and do getTotalLength()
document.getElementById('blue').getTotalLength() (the length is actually 197.32334899902344)ig try using conical gradient
if i were you, i would try to end the conical gradient on a floating number, instead of an integer
if you end in an integer, it creates this weird aliased effect
if the value is equal or higher than 1, i recommend subtracting 0.001 from the value
also, it avoids issues where the whole thing collapses when you hit 360deg
hmm understandable
tnx