Menu icon Foundation
Radial Progress Bar with F6

Hello,

I was wondering if that is possible with Foundation. If so, do you have any documentation for that? It would be really cool to have this as part of the base framework. There are times when the left to right standard bar just doesn't do the trick.

 

Thanks,

Stephen

radialprogress barfoundation 6

Hello,

I was wondering if that is possible with Foundation. If so, do you have any documentation for that? It would be really cool to have this as part of the base framework. There are times when the left to right standard bar just doesn't do the trick.

 

Thanks,

Stephen

Stephen Bramlett about 2 months ago

Just checking if anyone had some ideas.

Val Ery about 1 month ago

Hi Stephen!

Today I made this progress bar ... http://codepen.io/Val_Ery/pen/mWpEPJ
This is certainly not a radial progress bar. But the radial from this example can be obtained :)

In example:

  • Determined min and max value (aka 0% and 100%)
  • Displaying default value (attribute "value" ) in percent
  • Added ability to change the value (input element - type="number") by one percent

Such an example suits you?

Stephen Bramlett about 1 month ago

Hey Val Ery,

That's awesome, thanks! I will work with this and see what I can do.

-Stephen

Val Ery about 1 month ago

Hi Stephen!

I'm glad you liked it :)

If you have any questions, ask. Together we will try to find an acceptable solution...

At the moment, you can easily get this:
A) display angular segments instead of "rings"
B) display a simple percentage value instead of an input element