Skip to content

Latest commit

 

History

History
45 lines (31 loc) · 988 Bytes

README.markdown

File metadata and controls

45 lines (31 loc) · 988 Bytes

Super simple JavaScript library that draws good looking SVG progress circles. Requires jQuery.

Usage

Simplest thing that works:

<div id="progress"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="progress-circle.js"></script>

<script type="text/javascript">

// Set progress in percentages
$('#progress').progressCircle(19);

</script>

Of course, it is completely configurable:

<script type="text/javascript">

$('#progress').progressCircle({
    bgColor: 'yellow',
    fgColor: 'red',
    percentage: 73
});

</script>

Options

  • progress -- progress in percentages, from 0..100
  • bgColor -- color of the background circle
  • fgColor -- color of progress bar
  • bgWidth -- width of background circle
  • fgWidth -- width of progress bar
  • width -- width of circle
  • height -- height of circle