victorjonsson/pie-chart-count-down2.html

## pie-chart-count-down2.html
<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.piechartcountdown.min.js"></script>
  </head>
  <body>
    <div id="counter"></div>
    <a href="#" id="count-down-button">Count down</a>
    <script type="text/javascript">

      function startCounter() {

        // Create a reference to clicked button
        var $button = $(this);

        // Change button click event
        $button
          .text('Pause')
          .unbind('click')
          .bind('click', function() {
              var $counter = $('#counter');
              $counter.pieChartCountDown('toggle');
              var isPaused = $counter.attr('data-spinner-paused') !== undefined;
              $button.text( isPaused ? 'Resume':'Pause' );
              return false;
          });

        // count down options
        var options = {
          callback : function() {
            // Change back click event when count down finished
            $button.text('Count Down');
            $button.unbind('click');
            $button.bind('click', startCounter);
          },
          time : 25,
          color : '#FFF',
          backgroundColor : '#FF0000',
          size : 400
        };

        // Start count down
        $('#counter').pieChartCountDown(options);

        return false;
      }

      // Attach click event that will start the count down
      $('#count-down-button').bind('click', startCounter);

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.piechartcountdown.min.js"></script>
	</head>
	<body>
	<div id="counter"></div>
	<a href="#" id="count-down-button">Count down</a>
	<script type="text/javascript">

	function startCounter() {

	// Create a reference to clicked button
	var $button = $(this);

	// Change button click event
	$button
	.text('Pause')
	.unbind('click')
	.bind('click', function() {
	var $counter = $('#counter');
	$counter.pieChartCountDown('toggle');
	var isPaused = $counter.attr('data-spinner-paused') !== undefined;
	$button.text( isPaused ? 'Resume':'Pause' );
	return false;
	});

	// count down options
	var options = {
	callback : function() {
	// Change back click event when count down finished
	$button.text('Count Down');
	$button.unbind('click');
	$button.bind('click', startCounter);
	},
	time : 25,
	color : '#FFF',
	backgroundColor : '#FF0000',
	size : 400
	};

	// Start count down
	$('#counter').pieChartCountDown(options);

	return false;
	}

	// Attach click event that will start the count down
	$('#count-down-button').bind('click', startCounter);

	</script>
	</body>
	</html>