Justin Tadlock

X3P0: Progress is a block that allows users to create progress bars using a straightforward interface.
The block lets you add progress for nearly any type of goal:
<ul>
<li>Percentage: Outputs a percentage from 0% to 100%.</li>
<li>Decimal: Outputs a plain decimal number.</li>
<li>Currency: Create financial progress bars, choosing from a list of worldwide currencies.</li>
<li>Unit: Choose from a complete list of browser-supported units, such as yards, feet, liters, millimeters, and much more.</li>
</ul>
The output of the progress bar is highly customizable. Aside from standard block options, such as spacing, alignment, and border control, users also have a range of design tools at their disposal.
This block outputs proper <code><progress></code> and <code><label></code> elements in the markup. This should aid in accessibility, ensuring that all potential visitors to your site can read what the value of the progress is.

Progress Bar Block

A customizable progress bar block to visually track completion toward any percentage, numeric, financial, or unit-based goal.

renp

A lightweight responsive progress bar which will work with your favourite HTML5 theme.
It works with major browsers, is configurable and only dependency is jQuery which is heavily used by WordPress themes.
Usage
Use the shortcode [rprogress] anywhere while editing your post or page. Below are some examples:
<ul>
<li>[rprogress value=80] displays a progress bar with value of 80%</li>
<li>[rprogress value=95 text=”Homework nearly completed”] writes a text as well</li>
<li>[rprogress value=75 color=”#ff0000″] uses red color for the progress bar</li>
<li>[rprogress value=70 color=”#00ff00″ delay=300] uses green color, draws the progress bar faster (default delay is 1000)</li>
</ul>
Below is a complete list of attributes with default values as well:
<ul>
<li>value (default = 100)</li>
<li>color (default = “#4af”)</li>
<li>bgcolor (default = “#cc” )</li>
<li>delay (default = 1000)</li>
<li>border_radius (default = “3px”)</li>
<li>text (default = “”)</li>
<li>text_color (default = “#333”)</li>
</ul>

Responsive Progress Bar

Shortcode for displaying a responsive configurable progress bar.

Progress Bar Block vs Responsive Progress Bar