Dracula

Progress Bar Block

jamesdbruner

Create an automatic page load progress bar. Based on <a href="http://github.hubspot.com/pace/docs/welcome/" rel="nofollow ugc">Pace – Automatic page load progress bar</a>. Javascript by <a href="https://twitter.com/zackbloom" rel="nofollow ugc">Zack Bloom</a> CSS by <a href="https://twitter.com/adamfschwartz" rel="nofollow ugc">Adam Schwartz</a>. Themes inspired by <a href="http://tympanus.net/codrops/2013/09/18/creative-loading-effects/" rel="nofollow ugc">Mary Lou</a>
See a working demo here: <a href="http://pace.jamesdbruner.com" rel="nofollow ugc">pace.jamesdbruner.com</a>
Cool Features:
<ul>
<li>Customize the color of the progress bar with an easy to use color picker</li>
<li>Choose which progress bar ‘theme’ you want to use from a dropdown list</li>
<li>Decide whether you want to have the progress bar on every page or use the shortcode to add it to just a few specific pages/posts</li>
<li>The shortcode allows you to have different colored progress bars with varying themes on a page to page basis.</li>
</ul>
How to use the shortcode:
There are two attributes you can use
<ul>
<li>color</li>
<li>theme</li>
</ul>
Example: <code>[pace color="#29d9dd" theme="minimal"]</code> or just <code>[pace]</code> will work fine. (the default color is #29d9dd and the default theme is minimal)
There are ten themes to choose from
<ul>
<li>Minimal</li>
<li>Flash</li>
<li>Barbershop</li>
<li>MacOSX</li>
<li>Fill-Left</li>
<li>Flat-Top</li>
<li>CornderIndicator</li>
<li>Bounce</li>
<li>Big Counter</li>
<li>Center Circle</li>
</ul>

WP Pace

Create an automatic page load progress bar. Based on Pace - Automatic page load progress bar. Javascript by Zack Bloom CSS by Adam Schwartz.

Progress Bar Block vs WP Pace