<span class="progresspie">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progresspie color">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring color">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progresspie green">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring green">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progresspie red">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring red">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
The following example shows alternating pies with and without the vcenter
class in a line
with a line-height greater than the font-size (so that alignment makes a difference). Also, the last three
lines show different possible notations for color values (not with equivalent color, as you may have noticed).
<p style="line-height: 2em">
<span class="progresspie vcenter" data-piecolor="#93A">0</span> %
<span class="progresspie" data-piecolor="#93A">5</span> %
…
<span class="progresspie vcenter" data-piecolor="rgb(180,30,200)">80</span> %
<span class="progresspie" data-piecolor="rgb(200,50,220)">99</span> %
<span class="progresspie vcenter" data-piecolor="#9030A0">100</span> %</p>
</p>
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
The same with class progressring
instead of progresspie
:
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
data-piecolor-function
AttributeThis example shows a color function which utilizes the default colorByPercent function used in color mode, but modifies the mapping so that all values less than 50% get drawn in red and all the other colors are only used for greater values:
<head>
…
<script type="text/javascript">
function colorGt50(percent) {
var p = percent <= 50 ? 0 : 2 * (percent - 50);
return $.fn.progressPie.colorByPercent(p);
}
</script>
…
</head>
…
<body>
…
<span class="progresspie" data-piecolor-function="colorGt50">100</span> %
…
</body>
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
The same with class progressring
instead of progresspie
:
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
data-percent
-attribute instead of element content<span class="progresspie red" data-percent="0"> some text</span>
<span class="progresspie red" data-percent="5"></span>
…
some text
The same with class progressring
instead of progresspie
:
some text
Notice the slightly different size: The first pie gets sized to fit the content "some text". The others all get a default size because the empty span does not define a height the pie could adjust to. (See plugin documentation for details on sizing.)
Consider you're designing an HTML form for a user to fill, you might want to add a pie or ring chart visualizing the value of an input (like a text input or a select box). In that case, simply add the data-input
attribute and fit it with a jQuery selector specifying the input element from which to read the value.
In the simplest form, if the input has an id
, the selector is #
followed by the input's id
value:
<select id="valueSelect">
<option value="0">—</option>
<option value="20">20 %</option>
<option value="40">40 %</option>
<option value="60">60 %</option>
<option value="80">80 %</option>
<option value="100">100 %</option>
</select>
<span class="progresspie" data-input="#valueSelect"></span>
<input id="valueInput" type="text" value="50" size="3">
<span class="progresspie" data-input="#valueInput"></span>
<head>
…
<script type="text/javascript">
var timerVal = 0;
var timerRunning = false;
function startStopTimer() {
timerRunning = !timerRunning;
if (timerRunning) {
timer();
}
}
function timer() {
if (timerRunning) {
timerVal+= 1;
if (timerVal > 100) {
timerVal = 0;
}
$("#update1").text(timerVal);
$("#update2").text("%").attr("data-percent", timerVal);
progressPies.draw();
if (timerVal < 100)
window.setTimeout(timer, 400);
else
timerRunning = false;
}
}
</script>
</head>
…
<body>
…
<p><span id="update1" class="progresspie color">0</span> %<br>
<span id="update2" class="progressring color" data-percent="0">%</span><br>
<button onclick="timer()">Start / Stop</button>
</p>
…
</body>
0 %
%
Add the class busy
to progresspie
or progressring
in order
to render a “busy-indicator” not showing a percent value but displaying either a rotating pie slice
or a ring with a gap in order to indicate that your application is busy without any progress being measured.
See examples.html for more possible “busy-indicators” using the plug-in directly. This simple “application” script provides only these two default graphics, yet they may be combined with other classes or attributes as shown above, e.g. in order to define the color.
<span class="progresspie busy"></span>
<span class="progressring busy" data-piecolor="navy"></span>