maxcal · February 17, 2012 17:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>The progressive progressbar</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="progressbar.widget.js"></script>
        <link href="progressbar.widget.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="meterWidget" class="meter-wrap">
            <div class="meter-value">
                <span class="meter_text">0</span>
            </div>
        </div>
    </body>
 </html>
diff --git a/progressbar.widget.css b/progressbar.widget.css
 /**
 * @name        progressbar.widget.css
 * @author      Max Calabrese <max.calabrese@greenpeace.org>
 * @copyright   No such nonsense.
 * @version     0.1 
 */
 .bgimage {
     position: relative;
 }
 .meter-wrap {
    background-color: #D7D2D2;
    left: 580px;
    position: absolute;
    top: 370px;
    width: 330px;
 }
 .meter-value {
    background-color: #FBA239;
    width: 0;
    text-align: right;
    padding: 5px 0;
 }
 .meter_text{
    padding-right: 8px;
    font-weight: bold;
    color: white;
 }
diff --git a/progressbar.widget.js b/progressbar.widget.js
 /**
 * @name        progressbar.widget.js
 * @author      Max Calabrese <max.calabrese@greenpeace.org>
 * @copyright   No such nonsense.
 * @version     0.1 
 */

 var progressbar = (function(){
    /**
     * @var object config 
     */
    var config = {
        // The total counter target
        target : 2000,
        // The datasource for this counter
        url : '',
        // This means counter never totals out...
        wild_goose_chase: false,
        // Add this to count to create a fake target number
        wild_goose_chase_val: 500,
        // The meter sting / jquery obj
        $meter : '.meter-value',
        // The element used for textual display
        $meterText : '.meter_text',
        // Element which wraps meter.
        $holder : '.meter-wrap',
        // Delimeter used to indicate thousands 
        // use false for none.
        delimiter: ',',
        // The duration of the animation.
        duration: 2000
    };
    
    /**
     * Animate a visual and textual progress meter
     * @param integer count
     * return void
     */
    function animateObj(count) {
        var holderWidth = config.$holder.innerWidth();
        var countAsPx = count * holderWidth / config.target;
        // We are going to use jQuery animate method with a custom step
        config.$meter.animate({
            'width': countAsPx
        },
        {
            // Can be any Jquery animation
            easing: 'swing',
            duration: config.duration,
            // This updates the textual meter
            step: function(fin) {
                // We calculate the real value of the pointer from a PX value.
                var real  = Math.floor( config.target * (fin / holderWidth) );
                var regexp = /\B(?=(?:\d{3})+(?!\d))/g;
                // Use a regex to add delimenters
                if (config.delimiter !== false) {
                    real = real.toString().replace(regexp, config.delimiter);  
                }
                config.$meterText.html(real);
            }
        });
    }
    
    function init(conf) {
         config = $.extend(config, conf);
            
            // Just make sure we have jQuery objects to work with.
            if (config.$meter instanceof jQuery === false) {
                config.$meter = $(config.$meter);
            }
            
            if (config.$meterText instanceof jQuery === false) {
                config.$meterText = $(config.$meterText);
            }
            if (config.$holder instanceof jQuery === false) {
                config.$holder = $(config.$holder);
            }
            
            // Get count from webservice
            $.getJSON(config.url, function(data){
                
                // This makes the counter never fill up.
                if (config.wild_goose_chase){
                    config.target = data + config.wild_goose_chase_val;
                }
                // This keeps counter from overflowing
                else {
                    if (data > config.target) {
                        config.target = data;
                    }
                }
                
                animateObj(data);
            });
    }
    return {
        init: init
    }
 }());

 $(document).ready(function(){
    progressbar.init({
        'url' : 'http://moon.greenpeace.org/c/print.php?a=amazon_dilma_1'
    });
 });
	<!DOCTYPE html>
	<html>
	<head>
	<title>The progressive progressbar</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="progressbar.widget.js"></script>
	<link href="progressbar.widget.css" rel="stylesheet"/>
	</head>
	<body>
	<div id="meterWidget" class="meter-wrap">
	<div class="meter-value">
	<span class="meter_text">0</span>
	</div>
	</div>
	</body>
	</html>
	/**
	* @name progressbar.widget.css
	* @author Max Calabrese <max.calabrese@greenpeace.org>
	* @copyright No such nonsense.
	* @version 0.1
	*/
	.bgimage {
	position: relative;
	}
	.meter-wrap {
	background-color: #D7D2D2;
	left: 580px;
	position: absolute;
	top: 370px;
	width: 330px;
	}
	.meter-value {
	background-color: #FBA239;
	width: 0;
	text-align: right;
	padding: 5px 0;
	}
	.meter_text{
	padding-right: 8px;
	font-weight: bold;
	color: white;
	}
	/**
	* @name progressbar.widget.js
	* @author Max Calabrese <max.calabrese@greenpeace.org>
	* @copyright No such nonsense.
	* @version 0.1
	*/

	var progressbar = (function(){
	/**
	* @var object config
	*/
	var config = {
	// The total counter target
	target : 2000,
	// The datasource for this counter
	url : '',
	// This means counter never totals out...
	wild_goose_chase: false,
	// Add this to count to create a fake target number
	wild_goose_chase_val: 500,
	// The meter sting / jquery obj
	$meter : '.meter-value',
	// The element used for textual display
	$meterText : '.meter_text',
	// Element which wraps meter.
	$holder : '.meter-wrap',
	// Delimeter used to indicate thousands
	// use false for none.
	delimiter: ',',
	// The duration of the animation.
	duration: 2000
	};

	/**
	* Animate a visual and textual progress meter
	* @param integer count
	* return void
	*/
	function animateObj(count) {
	var holderWidth = config.$holder.innerWidth();
	var countAsPx = count * holderWidth / config.target;
	// We are going to use jQuery animate method with a custom step
	config.$meter.animate({
	'width': countAsPx
	},
	{
	// Can be any Jquery animation
	easing: 'swing',
	duration: config.duration,
	// This updates the textual meter
	step: function(fin) {
	// We calculate the real value of the pointer from a PX value.
	var real = Math.floor( config.target * (fin / holderWidth) );
	var regexp = /\B(?=(?:\d{3})+(?!\d))/g;
	// Use a regex to add delimenters
	if (config.delimiter !== false) {
	real = real.toString().replace(regexp, config.delimiter);
	}
	config.$meterText.html(real);
	}
	});
	}

	function init(conf) {
	config = $.extend(config, conf);

	// Just make sure we have jQuery objects to work with.
	if (config.$meter instanceof jQuery === false) {
	config.$meter = $(config.$meter);
	}

	if (config.$meterText instanceof jQuery === false) {
	config.$meterText = $(config.$meterText);
	}
	if (config.$holder instanceof jQuery === false) {
	config.$holder = $(config.$holder);
	}

	// Get count from webservice
	$.getJSON(config.url, function(data){

	// This makes the counter never fill up.
	if (config.wild_goose_chase){
	config.target = data + config.wild_goose_chase_val;
	}
	// This keeps counter from overflowing
	else {
	if (data > config.target) {
	config.target = data;
	}
	}

	animateObj(data);
	});
	}
	return {
	init: init
	}
	}());

	$(document).ready(function(){
	progressbar.init({
	'url' : 'http://moon.greenpeace.org/c/print.php?a=amazon_dilma_1'
	});
	});