From 6e3b2a22beddf310c5f2dffc596847a9aca02193 Mon Sep 17 00:00:00 2001
From: "Bradley M. Kuhn" <bkuhn@ebb.org>
Date: Mon, 9 Mar 2015 00:28:05 -0700
Subject: [PATCH] Animate the progress bar at page load.

This is perhaps too flashy, but it does successfully animate the
progress bar up to the target amount, and also changes the amount until
it reaches the total raised so far.
---
 www/conservancy/static/supporter-page.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index d9825d04..c2e6d52b 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -10,16 +10,32 @@ $(document).ready(function() {
     var noCommaGoal = goal.replace(/,/g, "");
     var noCommaSoFar = soFar.replace(/,/g, "");
     var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100;
+    var curValue = 0.00;
+    var incrementSoFar = 0.00;
 
-    $('span#fundraiser-percentage').text(percentage.toFixed(2) + "%");
+    $('span#fundraiser-percentage').text("");
     $('span#fundraiser-percentage').css({ 'color'        : 'green',
                                           'font-weight'  : 'bold',
                                           'float'        : 'right',
                                           'margin-right' : '40%',
                                           'margin-top'   : '2.5%',
                                           'text-align'   : 'inherit'});
+    $("#progressbar").progressbar({ value:  curValue });
 
-    $("#progressbar").progressbar({ value:  percentage });
+    function slowRise() {
+        if (curValue >= percentage) {
+            $('span#fundraiser-so-far').text(soFar);
+            $("#progressbar").progressbar({ value :  percentage });
+            $('span#fundraiser-percentage').text(percentage.toFixed(1) + "%");
+        } else {
+            var newVal = (curValue / 100.00) * noCommaGoal;
+            $("#progressbar").progressbar({ value:  curValue });
+            $('span#fundraiser-so-far').text(newVal.toLocaleString());
+            curValue += 0.5;
+            setTimeout(slowRise, 50);
+        }
+    }
+    slowRise();
 
     $('.toggle-content').hide();