#thermometer .title{font-size:20px;margin-top:0;text-align:center}#thermometer{height:auto;margin:0 auto;position:relative;width:auto}#thermometer .track{background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgb(0,0,.5)),color-stop(1%,#fff));background:-webkit-linear-gradient(top,rgb(0,0,.5) 0,#fff 10%);background:-o-linear-gradient(top,rgb(0,0,.5) 0,#fff 10%);background:-ms-linear-gradient(top,rgb(0,0,.5) 0,#fff 10%);background:-moz-linear-gradient(top,rgb(0,0,.5) 0,#fff 10%);background:linear-gradient(to bottom,rgb(0,0,.5) 0,#fff 10%);background-position:0 -1px;background-size:30% 10%;border:2px solid #454545;border-bottom:0;border-top-left-radius:20px;border-top-right-radius:20px;box-sizing:border-box;top:10px;left:0;height:165px;margin:0 auto;position:relative;width:30px;z-index:2}#thermometer .goal-raised{top:4px}#thermometer .progress{background:#03a44f;border-right:2px solid rgba(0,0,0,.15);border-left:2px solid rgba(0,0,0,.15);position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;height:0%;border-top-left-radius:20px;border-top-right-radius:20px;width:60%}#thermometer .goal{position:absolute;top:-1px;left:8px}#thermometer .amount{color:#333;border-top:1px solid #000;display:inline-block;font-weight:700;padding:0 5px 0 50px}#thermometer .progress .amount{border-top:1px solid #03a44f;color:#03a44f;position:absolute;right:5px;padding:0 40px 0 5px}#thermometer .bulb{background:0 0;border-radius:100px;display:block;margin:0 auto;padding:5px 0;position:relative;height:75px;width:75px}#thermometer .bulb .circle{background:#03a44f;border:2px solid #454545;border-radius:100px;box-sizing:border-box;-moz-box-shadow:inset 0 0 4px 2px rgba(0,0,0,.2),inset 0 -20px 5px 0 rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 4px 2px rgba(0,0,0,.2),inset 0 -20px 5px 0 rgba(0,0,0,.25);box-shadow:inset 0 0 4px 2px rgba(0,0,0,.2),inset 0 -20px 5px 0 rgba(0,0,0,.25);display:block;height:75px;width:75px}#thermometer .powered-by{font-size:12px;margin-top:5px;text-align:center} function formatCurrency(n, c, d, t) { "use strict"; var s, i, j; c = isNaN(c = Math.abs(c)) ? 2 : c; d = d === undefined ? "." : d; t = t === undefined ? "," : t; s = n 3 ? j % 3 : 0; return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ""); } function thermometer(goalAmount, progressAmount, animate) { "use strict"; var $thermo = $("#thermometer"); var $progress = $(".progress", $thermo); var $goal = $(".goal", $thermo); var percentageAmount; goalAmount = goalAmount || parseFloat( $goal.text().replace(/,/g, "") ); progressAmount = progressAmount || parseFloat( $progress.text().replace(/,/g, "") ); percentageAmount = Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); $goal.find(".amount").text( "$" + formatCurrency( goalAmount ) ); $progress.find(".amount").text( "$" + formatCurrency( progressAmount ) ); $progress.find(".amount").hide(); if (animate !== false) { $progress.animate({ "height": percentageAmount + "%" }, 1200, function(){ $(this).find(".amount").fadeIn(500); }); } else { $progress.css({ "height": percentageAmount + "%" }); $progress.find(".amount").fadeIn(500); } } jQuery(document).ready(function(){ thermometer(); });