thermometer-gist.html

<style>#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}</style>
<div id="thermometer"> <h1 class="title" style="color: rgb(247, 129, 4);">STEM Lab PTO Fundraiser</h1> <div class="track"> <div class="goal"> <div class="amount">35,000.00</div> </div> <div class="progress" style="height: 0%; background: rgb(247, 129, 4);"> <div class="amount" style="color: rgb(247, 129, 4); border-top: 1px solid rgb(247, 129, 4);">0.00</div> </div> </div> <div class="bulb"> <span class="circle" style="background: rgb(247, 129, 4);"></span> </div> <div class="powered-by"> Powered by <a href="https://www.easy-fundraising-ideas.com" rel="nofollow" style="color: rgb(247, 129, 4);">Easy Fundraising Ideas</a> </div> </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script>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 < 0 ? "-" : ""; i = parseInt(n = Math.abs(+n || 0).toFixed(c), 10) + ""; j = (j = i.length) > 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(); });</script>