Progress Bars

I know how to make the normal progress bars. The thing i want to know is how to make those progress bars with a percentage in them and the progress bar is like it's getting filled up like
Progress Bar 1:
------------------------------------
| ||||||||| 67% |
------------------------------------

pretend the | bars are blue like water

But i know how to create the ones like

Progress Bar 2:
--------------------------------------
| [] [] [] [] [] [] [] [] [] [] [] [] []|
--------------------------------------
pretend the [] are those blocks.

So could anyone tell me how i can create Progress bar number 1. It's the same one that install shield uses? Thanks if you can help.