"Inverted" progress bar
June 22, 2018 12:00 AM
I'm trying to create a progress bar that counts downwards from top to bottom. I can get it to work if I use a color for the fill and background, but not if I use the "default" image. To get it to work with the colors, the bar needs to have the "Empty Bar" checked.
When I look at the HTML, it looks like the "top" and "height" of the "fill" are what changes, specifically the top and height values. Forward increases the height and decreases the top values.
I'm guessing that if I could use the image as the background and a color for the fill, this would work? I'm just stumped on how I could do that OR a property for the bar that would do so.
Discussion (5)
Addendum: What I'm trying to achieve works if I add an image, then layer a progress bar with a transparent background above the image. To me, this is gross, because now I have 2 "images" and would need to do this for any progress bar that I want to behave this way.
(Context: I have progress page that has a button for each chapter that opens a menu to access the pages. The chapter buttons go down vertically with a progress bar between them that needs to "tick down" to show progress towards the next chapter.)
Hi Jason,
Quite easy. Check the attached sample. I think this works exactly the way you want. The left one that is..
I changed a few things... Setting the initial value to 100... and on the button changed the direction to 'Backward'
Then it works as you wanted...
Regards,
Math
Hi Math - Looking at the sample you sent, the left one isn't what I was hoping for. When I look at the sample you posted, it starts with the "image" filled in the progress, then it "covers" the green ticks from the top down. The one on the right is what I was hoping for, where it starts with an "empty" bar, then adds the green boxes from top to bottom.
The one on the right uses a progress bar that does count forward, so it's basically going from grey to transparent so that the image behind it can be seen.
Hopefully that makes sense - I'd tried the starting at the max, then stepping backward and it wasn't quite what I was looking for.
Why not use CSS to rotate the default progress bar by 180deg?
#progress39 {
transform:rotate(180deg);
}
Because it'd be more efficient to add a class? ;-) Seriously, though - Tim, you've come through again. The real answer is "because I don't know enough HTML5 to have considered or even known the transform property existed."
Thanks to both for the help!!!
Discussions have been disabled for this post