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.

Jason Penney

ProgPress provides a simple 
<a href="https://codex.wordpress.org/Shortcode" rel="nofollow ugc">shortcode</a> for creating 
progress meters on your WordPress site. They can be used to track 
just about anything where you count up towards a goal: word-count, 
fundraising, etc. You can put them in individual posts and pages, or 
include them in text widgets.
To insert a meter simply use the <code>[progpress]</code> shortcode:
<pre><code>[progpress title="My Project" goal="100000" current="1234"]
</code></pre>
The <code>[progpress]</code> shortcode has the following options:
<ul>
<li>Required:
<ul>
<li><code>title</code>: A string containing The title for your meter.</li>
<li><code>goal</code>: A number. The one you are working towards.</li>
<li><code>current</code>: A number showing how far along you are.</li>
</ul>
</li>
<li>Optional:
<ul>
<li><code>previous</code>: You can put your previous value of <code>current</code> here 
if you want to highlight your most recent progress update. It’s 
not visible using the default styling (but it doesn’t hurt 
anything). </li>
<li><code>label</code>: What it is that you’re counting, like <code>"words"</code> for 
example.</li>
<li><code>separator</code>: A character or string to display between 
current and <code>goal</code>. Defaults to <code>"/"</code>.</li>
<li><code>class</code>: An extra CSS class to apply to the meter container. 
Useful if you track different projects with different styles.</li>
<li><code>prefix</code>: A character or string to display before each number 
(like ‘$’). Off by default.</li>
</ul>
</li>
</ul>
ProgPress was designed to be customizable via CSS. I’ve provided 
some examples in the Screenshots section.
<h3>NaNoWriMo Support</h3>
If you are participating in NaNoWriMo, ProgPress can automatically 
track your progress. Just enable the additional ProgPress – 
NaNoWriMo Support plugin (in addition to ProgPress), and set the 
 nanowrimo attribute to your NaNoWriMo username (this is a change 
from last year where your user id was used).
<pre><code>[progpress title="My NaNoWriMo Progress" nanowrimo="jczorkmid" label="words"]
</code></pre>
So as to not overload their servers, the plugin caches your word count 
info, so it may not update immediately when you update your word count 
at nanowrimo.org.
Note that as of November 10, 2011 the NaNoWriMo Word Count API is 
not yet officially released. At times it seems to return invalid 
errors saying your user doesn’t exist, or you don’t have a novel in 
progress this year. In my testing this clears itself up after a bit, 
and once some data has been loaded WordPress will cache it rather than 
continue to display errors if it keeps going up and down.
<h3>More Info</h3>
<ul>
<li>Check out my <a href="http://jasonpenney.net/wordpres-plugins/" rel="nofollow ugc">other WordPress 
plugins</a>.</li>
<li>Check out this excellent <a href="http://www.penrefe.com/2010/09/07/progpress-setup-customisation-guide/" rel="nofollow ugc">ProgPress Setup & Customization 
Guide</a> 
for some additional CSS examples.</li>
</ul>
<h3>Thanks</h3>
Special thanks to <a href="http://kjtoo.com/" rel="nofollow ugc">Kris Johnson</a>, 
<a href="http://www.penrefe.com/" rel="nofollow ugc">K. L. Kerr</a>, <a href="http://ctmiller.net/" rel="nofollow ugc">Chris 
Miller</a>, <a href="http://www.inkygirl.com/" rel="nofollow ugc">Debbie Ohi</a>, 
and <a href="http://scottphillips.org/" rel="nofollow ugc">Scott Philips</a> for their feedback and 
support.

ProgPress

Easily insert progress meters into your content and/or sidebars.

Responsive Progress Bar vs ProgPress