Hey guys!
Was wondering if anyone can helpe me out with this. i need to insert this animated progress bar in my website :
http://tinacious.github.io/goalProgress/
Can anyone help? I have no clue as to how to get this done. 
1 there is two line to ad in custom code HEAD section in your site dashboard:
<link rel="stylesheet" href="goalProgress.css">
<script src="goalProgress.min.js"></script>
BUT the two files (the css and the js ones) must be hosted somewhere (dropbox for example), and instead of just their file name, you need to put the full URL starting by http:// . If you use Dropbox, once you’ve generated direct link to each of the file, replace www.dropbox.com by dl.dropboxusercontent.com.
1 bis paste also this in the HEAD section:
<script>
$(document).ready(function(){
$('#sample_goal').goalProgress({
goalAmount: 600,
currentAmount: 400,
textBefore: '$',
textAfter: ' raised.'
});
})
</script>
2 you don’t need to link to jquery, webflow does this already
3 create a div element for your bar and give it the class name sample_goal
should work
Hi Vincent!
Thanks for the tips, man! I did all that, but i think we’re missing something.
Here’s what is showing up when i publish it:
http://catete92.webflow.com/
I havent used dropbox (uploaded the files at my company’s domain)
What do you think is happening?
Hi @gmaueler, I think you are missing this part:
3 create a div element for your bar and give it the class name sample_goal
I see the code in the published site, but no div element with id sample_goal. Could you check?
Hi @cyberdave, i did create a div and named it sample_goal. (Dragged a ‘div block’ to the site’s body and named it).
I’ve checked the source code as well, and it shows up there, right after the tag:
<div class="sample_goal"></div>
Is that not right? Here’s the full code as it is now:
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com--><!-- Last Published: Wed Mar 11 2015 16:57:30 GMT+0000 (UTC) --><html data-wf-site="54feec29b8f7c5751cf0240c" data-wf-page="54feec29b8f7c5751cf0240d"><head><meta charset="utf-8"><title>Catete92</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="generator" content="Webflow"><link rel="stylesheet" type="text/css" href="https://daks2k3a4ib2z.cloudfront.net/54feec29b8f7c5751cf0240c/css/catete92.webflow.651a901a4.css"><script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js"></script><link rel="shortcut icon" type="image/x-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico"><link rel="apple-touch-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png"><link rel="stylesheet" href="http://estudiopira.com/goalprogress/goalProgress.css">
<script src="http://estudiopira.com/goalprogress/goalProgress.min.js"></script>
<script src="http://estudiopira.com/goalprogress/goalProgress.js"></script>
<script>
$(document).ready(function(){
$('#sample_goal').goalProgress({
goalAmount: 600,
currentAmount: 400,
textBefore: '$',
textAfter: ' raised.'
});
})
</script></head><body><div class="sample_goal"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/54feec29b8f7c5751cf0240c/js/webflow.35e0b8ca4.js"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body></html>
Probably my fault from the begining when I transcripted the procedure.
It’s not a class but an ID you have to affect to the div. From the github page:
Put an empty element on the page: <
div id="sample_goal"></div>
So it’s in another place in Webflow, on the Settings Tab of the designer. The Unique ID field.
JS things often demand you affect an ID to target it… maybe because it’s supposed to be unique.
1 Like
Excellent, well pointed out!
I did that, but somehow it’s still not working
Still nothing showing up.
would you mind styling a bit the sample_goal element? at least height and width and background color.
Did that. still nothing :[
(It doenst show on the source code cause it goes to the .css file)
Hi @gmaueler, the issue at the moment is that you have some code errors and the script on the page will not run, see the errors below (right click on published page in Chrome, select inspect element)
Need to check those errors first. 1. jquery not defined means that the script is running before jquery is loaded, or jQuery needed by plugin is different version than jQuery uses in Webflow. The other errors look to be cascading errors because of the jQuery error.
If you can share your read only (see our support guidelines): Learn web design with free video courses and tutorials | Webflow University
I am happy to check how you have the code setup.
Sure thing! Thanks 
Here it is:
https://preview.webflow.com/preview/catete92?preview=5bfce53a5d73b60300a4ccd09d15d93f
i tried using a different .js from another source (GitHub - kopipejst/progressbar: ProgressBar in 4 lines of jQuery), and i managed to make it load the bar, but still doesnt show the percentage 
Hi @gmaueler, thanks for your update. I was looking at the instructions for the latest plugin you are using, and the javascript in the index.js file you are loading, does not match the example code:
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}
Are you using the second plugin now, or the first?