Using states to warn about thresholds

The progressbar widget isn't restricted to marking the progression toward some end point. It can also be used as a marker for utilization of some resource. For example, your application might allow the user to store 100 MB worth of image data. It might make sense to show them how much of this capacity is currently in use. The progressbar widget is an ideal solution for graphically depicting resource utilization scenarios such as these. Taking things a step further, we might also want to warn the user about utilization thresholds. That is, at a certain percentage, the resource is getting near capacity, but the user still has time to do something about it.

Getting ready

For this demonstration, we will create two simple div elements for the two progressbar widgets we want to display:

<span>CPU:</span>
<div id="cpu-utilization"></div>
<span>Memory:</span>
<div id="memory-utilization"></div>

How to do it...

Here...