Menu icon Foundation
Animated Progress Bars with Tooltip Percentage Animation

Hello,

Can anyone tell me the best way to create a Bootstrap style Animated Progress Bar complete with tooltips without using bootstrap? This example(which uses Bootstrap) shows what I'm trying to achieve with one exception. I would love for the actual width of the progress bar animate the displayed percentage and change as the bar animates.

http://codepen.io/valencia123/pen/aOopQx

The problems I've run into are:

1. Is there a class to keep tooltips exposed so they aren't hidden until clicked or hovered? I can do this with jQuery but was hoping for easy Foundation integration.
2. Tying the animation of the progress bars and the percentage count together. I have managed to animate the bars with CSS and the actual percentage with Jquery to create the illusion that they are working together but would love to know a smarter/better way!

progressbarstooltippopoveranimationanimatejqueryabsolutecount

Hello,

Can anyone tell me the best way to create a Bootstrap style Animated Progress Bar complete with tooltips without using bootstrap? This example(which uses Bootstrap) shows what I'm trying to achieve with one exception. I would love for the actual width of the progress bar animate the displayed percentage and change as the bar animates.

http://codepen.io/valencia123/pen/aOopQx

The problems I've run into are:

1. Is there a class to keep tooltips exposed so they aren't hidden until clicked or hovered? I can do this with jQuery but was hoping for easy Foundation integration.
2. Tying the animation of the progress bars and the percentage count together. I have managed to animate the bars with CSS and the actual percentage with Jquery to create the illusion that they are working together but would love to know a smarter/better way!

Rafi Benkual almost 4 years ago

jQuery animations are pretty easy, and you can create a unique ID for each bar to have them fill to different widths.

http://codepen.io/rafibomb/pen/dYZgeX?editors=001

Or with just CSS keyframe animations

http://codepen.io/rafibomb/pen/dYZgeX?editors=010

James Lanman almost 4 years ago

Rafi - I appreciate you taking the time to make that codepen. I'm already able to do that animation and I'm already able to do a tooltip that counts the percentage via two different scripts executing simultaneously. but the classes are all custom and I think there is a more efficient way to run the scripts.

Even if you could just tell me the best way to do the tooltips similar to that codepen link I would appreciate it. Because I have made my own but would like to stay within the Foundation toolset for consistencies. Cheers!