Progress Bar Widget

I get asked about my progress bars in the right sidebar. I honestly don't remember where I got it but the code does include the developer's information.  It was designated as free for personal use..

I've finally figured out how to share the code, so here you go!

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <style type="text/css"> div.smallish-progress-wrapper { /* Don't change the following lines. */ position: relative; border: 1px solid black; } div.smallish-progress-bar { /* Don't change the following lines. */ position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { /* Don't change the following lines. */ text-align: center; position: relative; /* Add your customizations after this line. */ } </style> <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px"> '); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"> </div> '); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px"> ' + percent + '%</div> '); document.write('</div> '); } </script> <script type="text/javascript">drawProgressBar('#ff0000', 200, 58.33);</script> This is the text that appears under the bar.

There are only two things that you should be changing in the entire widget. At the bottom, the "This is the text that appears under the bar" and to get the bar to show the correct %, you would change the "58.33" in the line above that to the number that you need.

Happy Stitching!

Stacy