Brand spankin' new progress bars are up! I finally got it! It was a long road getting there since I am new at editing code. It took a lot of testing and changing code, since I combined different elements of different progress bars that I have seen around. Man Bytes Hollywood was a great resource, and I used knitticisms for details on how to add the text below the bar. I saw many blogs that suggested you load 20+ images onto a photo sharing site (like PhotoBucket) and then pull from those images when you want to change the progress percentage. This seems a little overboard, when all you really need to do is get your code in place and then change percentages, colors, and titles in the code as you need to. It is easier than it sounds- I promise. Well folks, here is the code I came out with in the end. It will produce the progress bar you see on the left side of this entry, but you can customize it to fit your own projects. I am still working with it, but so far it is looking nice.
Paste this in CSS (bottom sidebar section for me):
.prog-border {
height: 15px;
width: 150px;
background: #fff;
border: 1px solid silver;
margin: 10px 45px 10px;
padding: 0;
}
.prog-bar {
height: 11px;
margin: 2px;
padding: 0;
background: #8284e2;
}
And then in your HTML section, paste the following:
<div class='prog-border'>
<div class='prog-bar' style='width: 40%;'>
</div>
</div>
<p style='text-align: center;'>
Stash Buster Hooded Vest 40%
</p>
