percent=top is not a valid attribute for
percent. It seems to be doing what you are intending but it really doesn't know what what you're trying to do (unless you've added CSS to handle it that way -- I didn't look at your stylesheet). The accepted arguments for
after. But seeing as how it's working for you, you may as well just leave it. It's not going to break anything.
2. The more important thing is your width.
width=25% isn't doing anything as
width isn't an accepted value. There was some discussion (on another thread) about adding a
width parameter and allowing the width to be variable which I either dropped the ball on and forgot about or decided it was secondary to the
fullwidth parameter that I *did* add (in the same thread) which allows the progress bar to be responsive (e.g. takes up the full width of the container rather than having a hard-coded width of 400px.
SO, to answer your question, your updated shortcodes should look like this:
[wppb progress=80 percent=inside fullwidth=true]
[wppb progress=100 percent=top fullwidth=true]