Streaming live at 10am (PST)

Creating a Gauge Chart


#1

Is there any way of creating a gauge chart (circle graph) with a percentage counter from 0 up natively in Webflow? Here's an example of what I'm looking to do:

http://codepen.io/TimLamber/pen/vetEy


#2

Haha, I tried and failed, with kind of the same reference as yours.

I googled it again and found this: http://www.cssscript.com/creating-fast-and-responsive-gauges-with-pure-css/

Looks like it's entirely possible to make it within webflow... easier than a full circle... still don't see how a full circle anim would be possible...

Here is how to make it:

http://www.cssscript.com/creating-fast-and-responsive-gauges-with-pure-css/

I replicated it into webflow and I get that :

https://v.usetapes.com/o9gdWdEqHW

with minimum custom code, I show it at the end of the video. I didn't know if I could reproduce these declarations:

.container:hover .gauge-c { 
.container:hover .gauge-c {

and I'm pretty sure I can't declare the transform-origin: center top;
in webflow's UI

@cyberdave can I delcare things like .container:hover .gauge-c { in the UI?


#3

http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.