Is there a way to achieve a similar effect as seen here? I've tried implementing the code from this answer, but it's not entirely clear. The suggestion is to use this jQuery plugin, but I can't seem to make it work. I prefer using Foundation 4 for my project, which includes simpler-to-create progress bars. Additionally, the animation code in the second example looks cleaner compared to the messy and redundant code in the first example.
You can view my live code here. I'm specifically working on the skill bars in the about section. I want the animation of these bars to pause until the user scrolls to that section of the page.
EDIT: Any ideas on how to prevent the bars from extending beyond their containers when resizing the page (since the site should be responsive) would be greatly appreciated.
EDIT2: After some testing, I found that using overflow: hidden; on .progress fixes the issue with the bars breaking out of their containers. However, the sizes remain unchanged when the window is resized, affecting the appearance of button overlays. Suggestions on resolving this problem would be highly valued!