Html-styled progress bars

[Malkavian Grin]

@Neopopulas Your images didn't come through, so your argument is a little harder to follow for me.

@bwatford Interesting idea, and that does tend to follow the design choices for bars like these.

[Malkavian Grin]

Healthy

Winded

Struggling

Hurt

KO

---

1

2

3

4

5

---

So, this is my first stab at this. It functions much like an HP meter; more full is better.

Getting this to work was tricky. I still don't like my solution. But, I found a gradient image 334px wide. I set it to the background for miniBarProgress at 1000% background-size. My intent is to use only a single image to achieve multiple colors, without showing the whole thing. So this stretches it wide enough to have decently easy math.

Healthy means: miniBar is 100% width and miniBarProgress is 0% background-position.
Winded means: 75% and 25%
Struggling means: 50/50
Hurt means: 25/75
and for KO I used: 5/95

Like I said, the math worked out easily enough with that 1000% size. But I'm sure there's a better way.

---

Okay, I made a second pass to test if this works at smaller sizes. It doesn't like long text so I made them into numbers. I also increased overall bar width to accommodate the smaller area (200px is what I used for Character Cards).

I modified the colors on this one by about 5% to try to make them a little more defined between each other. Might need more though.

1: Still 100% and 0%
2: 80/30
3: 55/55
4: 30/80
5: 10/100

[Neopopulas]

18 hours ago, Neopopulas said:

100%

75%

50%

25%

I'm not super happy with the mid-colours because i made it in photoshop which i'm not exactly an expert at. Ideally it would go red till 25, then orange till 50, then yellow until 75 then green until 100. I can do that with something like " background: linear-gradiant(to right, red, orange, yellow, green) " which does work but then i couldn't think if a simple way to apply a percentage to the bar that didn't just scale the colours with it instead of making the gradient static.

 

These ones aren't showing up?

Interesting, i checked on chrome and they aren't. Which means firefox has probably cached the images and they have since been moved and don't link correctly. So...

100%

75%

50%

25%

Serves me right not hosting them somewhere better.

Anyway, the image colours aren't really as vibrant as i'd like but thats fixable with some editing of the image itself.

Edited June 8, 2023 by Neopopulas (see edit history)

[Malkavian Grin]

@Neopopulas Ohhh I see what you're going for now. My issue with that style is that it pretty much has to be full width like that. You can't shrink them or they'll just show all red. That's why I opted for changing the background position as well.

[Neopopulas]

6 hours ago, Malkavian Grin said:

@Neopopulas Ohhh I see what you're going for now. My issue with that style is that it pretty much has to be full width like that. You can't shrink them or they'll just show all red. That's why I opted for changing the background position as well.

Yeah i ran into that problem when i was shifting them around. My initial thought was to use linear-gradient but it runs into the same problem because i couldn't think of a way to make the linear-gradient the background and then layer a bar over the top of that to cover it, so the linear-gradient IS the bar and has the same problem when you shrink it. What you would need to do is have a linear-gradient background and then only display - probably through transparency - certain percentages.

I see what you did is have a very wide static background image and then shift the image along the gradient based on what the percentage was which is a pretty good solution. I was looking at that and seeing if there was a way to show more than one colour at a time so you can see that the left side of the bar is red and scary and the right is green and good but i haven't been able to yet.

 

[Malkavian Grin]

8 hours ago, Neopopulas said:

Yeah i ran into that problem when i was shifting them around. My initial thought was to use linear-gradient but it runs into the same problem because i couldn't think of a way to make the linear-gradient the background and then layer a bar over the top of that to cover it, so the linear-gradient IS the bar and has the same problem when you shrink it. What you would need to do is have a linear-gradient background and then only display - probably through transparency - certain percentages.

I'm still not 100% sure what your intentions were, but here's what I could interpret them as. Essentially, Baldr knows what colors to use to simulate a background, based on theme. I use the Premium MW one, so this is my current color. It looks transparent to me. Not sure if this is the effect you were looking for or not, though.

Essentially, when this goes into becoming a "button" function, it'll be easy to set whatever theme's "background color" is to miniBarProgress in order to "fake" some transparency.

Premium theme:

75%

25%

Standard theme:

75%

25%

---

Well, looks like linear-gradient doesn't work right now, nor do transparencies. Too bad; they looked nice!

[Neopopulas]

I tried my hand at something similar with similar results

75%

---

This is an image of what it looks like in the editor

This one is a little more annoying to do because you can't just put 75% as the bar width and put 75% in the text. You have to put 25% in the bar width because its 100-25 and then put 75% in the text but its basically what i was thinking.

<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
	<div class="miniBar" style="height: 18px;background-image:url(&quot;https://i.imgur.com/WEzpt6W.png&quot;);background-size:cover;">
		<div class="miniBarProgress" style="position: absolute;right:0;height: 18px;width:25%;margin-right: 23px;background-color:#E7DABC;">
			<strong>75%</strong>
		</div>
	</div>
</div>

I tried using an absolute position and then just extending the base in the background colour so it fills the last 25% but it stripped the code for that too.

I'm guessing the more complex stuff will have to wait.

[Malkavian Grin]

100%

75%

0%

I was trying to do something similar, so the % didn't show over the bar, but all it does it complicate the design. You have to accommodate the extra spacing for the text, so you don't get a "true" 100% or 0% (see above). I used 5% on either side to represent being all the way full or empty. Is it perfect? No, but it replicates what you're looking for.

Let's hit save and see what happens.

So, it looks like I got it work like you wanted (at least from your image). All I did was float that div. Absolute positioning can be fun, but more often than not I find it's just overly complicated for minimal returns on investment.

[Neopopulas]

Ah, an elegant solution. Foating the bar on the right works much better.

The text is a little annoying of course but you could A) not use text at all - you don't 100% need it or B) you could just center the text no matter the size of the bar.

Or you could have the text outside the bar if you like, but being able to essentially 'count down' with the gradient background is nice.

I might play with adding 'pips' to the bar. If you use the text to add X amount (say X/10) pips and count down, then the pips show what percentage its at and they disappear as the bar shrink, showing you the numerical value of the bar in a visual way. And you can just delete the pips as needed instead of worrying about layering over them

Edited June 10, 2023 by Neopopulas (see edit history)

[Malkavian Grin]

Yeah, that's why I was opting (in my designs) for leaving the text (or icon) inside the colored area. You're always going to see the colored parts, so it was a guarantee to see the text. The only complex part about that is when you get near 0%, which I opted to leave at like 5% instead so you actually see the red.

Text outside of the bar is a whole new bag of problems for the design, IMO. Without it bounded by something, I think it'd look odd. Perhaps you could leave it wrapped inside of the outer "shell" div you use for a border?

---

I want to do a little testing with some designs I found on Pinterest which simulate video game style bars (with the icon always on the left, but using a percentage bar). I'll include the image in case you wanna try too.

---

 

 

Oh, it works! I wasn't totally sure it would. It's not perfect (the thicker border on the bottom right isn't rounded #%$&@) and I think adding a shine graphic would complicate this more than I have energy for at the moment.

[Neopopulas]

Oh thats really cool though. I might take a look at it when its not 1am, but that has a lot of potential.

[Malkavian Grin]

3 hours ago, Neopopulas said:

I might play with adding 'pips' to the bar. If you use the text to add X amount (say X/10) pips and count down, then the pips show what percentage its at and they disappear as the bar shrink, showing you the numerical value of the bar in a visual way. And you can just delete the pips as needed instead of worrying about layering over them

I found a design (also on Pinterest) that had pips instead of just a solid bar.

For this design, I'll simply use 10 pips to each represent 10% of the whole. You could probably add more total pips (like you're saying) if the math works out evenly.

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

So, I actually changed this design halfway through. I originally used extra graphics for a beginning and ending "cap" as well as separators between each pip. I decided I'd bypass all the extra work (and code that would be a pain to use) in favor of uniquely-rounded corners that look okay being used multiple times (and are self-contained to a single div).

[Neopopulas]

Oh i like the green, and it would be fairly easy to change the colours - even if you needed to make a new image, you can change colours pretty easily these days

You could do a lot with this.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

---

 

 

 

 

 

 

---

This one didn't come out the best because it used a transform: rotate that isn't supported but it could still be okay

 

 

 

 

 

 

 

 

 

 

Edited June 11, 2023 by Neopopulas (see edit history)

[Malkavian Grin]

Yeah, I wish rotate was allowed. :/ You could do so much cool stuff with it!

I made those last bars with the least possible graphics, using a 1 pixel slice for the button and the background bar. I love being efficient lol. The graphic I took that design from was actually way less angular, but again, I was trying to avoid extra divs and graphics and whatnot.

I've got one more idea to use transparent chevrons that actually layer over each other, but that'll have to wait.

I also had another idea for how to display the percentages; why not make them part of the background bar? Then as the progress goes down or up, it covers/uncovers the percentage behind it. It won't be perfect but it could be neat.

[Neopopulas]

Yeah if you made a custom image that was a gradient (or whatever you like) and you made markers for percentages - in 10s, or 25s or whatnot - and then just covered it as you wanted it to shrink and hid those markers.