Html-styled progress bars

Neopopulas · June 5, 2023

@Malkavian Grin Coming in strong with the styling. This was not something i was up to doing at midnight when my hyperfocus ran its course.

@CharmingSatyr (every time i see your icon i do a doubletake because i use that as my icon in so many places)

The tutorial would actually be pretty easy - if someone wanted to do this now before the plug and play button eventually (hopefully) goes in, you could just copy the base code which i'll post at the end. However, if you want to know how it works its not too hard. In fact, this used to be my full-time job.

To start with you need this;

<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
		<div class="miniBar">
			<div class="miniBarProgress" style="height:20px;width:43%;background-color:#0da271;text-align:right;">
				<strong><span style="color:#bdc3c7;">43%</span> </strong>
			</div>
		</div>
	</div>

And get this.

43%

<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">

To explain this are the steps you're looking at;
• border. The first 2px is the width of the border, its weight. (#666 is the colour of the border).
• width needs to be 100% so it fills whatever its a part of, in this case its full-width of the screen so it doesn't break mobile.
• max-height which is the height of the box. You can make this shorter or taller to fix what you need.
• border-radius is how curved the corners are and the padding is the spacing around it.

Example; To show the differences, i've changed the border to 6, with a red (#c11b0e) colour. I have to leave the Width alone. I shortened the box with max-height to 20, and made it super curved with the border-radius changed to 8. As you can see the actual bar part of it is broken now because the container is shorter, we'll change that in the next bit.

<div style="border:6px solid #c11b0e;width:100%;max-height:20px;border-radius:8px;padding:2px;">

That will cause the entire thing to look like this:

43%

To change the green bar itself, you need to move to the next line in the code, which is the 'minibar' you need to look at this part of the code;

<div class="miniBar">
		<div class="miniBarProgress" style="height:20px;width:43%;background-color:#0da271;text-align:right;">
			<strong><span style="color:#bdc3c7;">43%</span> </strong>
		</div>

On the miniBarProgress line you have....
• height which is 20 (but we changed the max height to 20 so its much too large to fit)
• width here is how far along the bar is out of 100%.
• background colour which is that green (#0da271)
• text-align:right is whether you want the text within the bar to align left, middle or right.
The next line controls the text that sits on the bar, which is very simple but can be styled more than this.
• colour decides the colour of the text, in this line <strong> is just making the text bold so its easier to see.

So we're going to fix the bar we broke earlier. Because we made the max-height of the border 20, and the height of the bar is 20 already we have to change that, changing the height to 5 makes the bar fit within the (now ridiculous for example purposes) border of the bar.

In the interest of showing how everything works, we'll also change the percentage of the bar, so we will change the width of the miniBarProcess to 87% and the colour of the bar itself by changing color from #0da27 to #a2530d

However its much too short for the text to fit, we COULD change the size of the text but honestly it would have to be much too small to show up so we'll delete it entirely.

The bar code, the abomination that it is, should look like this;

<div style="border:6px solid #c11b0e;width:100%;max-height:20px;border-radius:8px;padding:2px;">
	<div class="miniBar">
		<div class="miniBarProgress" style="height:5px;width:87%;background-color:#a2530d;text-align:right;">
		</div>
	</div>
</div>

So that is how you change all the major parts of the bar.

Is you want to follow the additional styling what you need to do is add background images to the bar instead of colours.

So the new code with the styling will look like this

		<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
			<div class="miniBar">
				<div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url(&quot;https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg&quot;);">
					<strong><span style="color:#bdc3c7;">60% Health</span> </strong>
				</div>
			</div>
		</div>

Which, once again, looks like this;

60% Health

Most of the things here are the same, except now you have the addition of
background-image:url you can use this addition to add a texture to the back of the bar. Everything else will be the same, you can use pretty much any image for this.

Lastly is pushing it into the middle of the post. Do to that you need to wrap the entire code in this code

	<div style="float:right;width:78%;margin-bottom:10px;">
</div>

Which all seems very complicated but really its not, and you can just play with numbers until you get what you want. If something breaks, you just Crtl+Z (or better yet, just keep the base code in a notepad.)

The final code will look like this;

Base 100% width

	<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
			<div class="miniBar">
				<div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url(&quot;https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg&quot;);">
					<strong><span style="color:#bdc3c7;">60% Health</span> </strong>
				</div>
			</div>

Next to floated images

	<div style="float:right;width:78%;margin-bottom:10px;">
		<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
			<div class="miniBar">
				<div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url(&quot;https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg&quot;);">
					<strong><span style="color:#bdc3c7;">60% Health</span> </strong>
				</div>
			</div>
		</div>

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

CharmingSatyr · June 5, 2023

*bookmarked to re-read on a night when I haven't been drinking*

Thank you! 🙂

Malkavian Grin · June 5, 2023

@Neopopulas Thank ya kindly! :3 I also used to do this for a job. It's nice to talk shop every once in awhile. Nice explanations as well; saves me from typing it out hehe 😉

Gonna mess with another design based on my latest character card usage.

Hmmm, seems like my background positions didn't take. I forgot that hasn't been approved yet. Dang. I'll have to slice graphics up if I want to use 'em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in semper justo. Ut scelerisque at ipsum vitae tincidunt. Vestibulum non vulputate justo. Curabitur efficitur, libero eget sollicitudin gravida, est nisl fringilla lacus, in fringilla lectus odio eget mi. Etiam eget consectetur purus. Proin nulla ipsum, posuere a tempus id, efficitur vel magna. In ut nibh sed urna ultrices porttitor sit amet quis nisl. Donec volutpat lectus molestie, tincidunt leo accumsan, sodales justo. Mauris elementum in nunc ac consequat. In ut efficitur ante, ac vestibulum erat. Pellentesque facilisis lorem eu commodo faucibus. Nam ultricies dui bibendum nibh tempus, at varius eros hendrerit. Vivamus vulputate eget augue quis congue. Aenean eleifend dui pharetra enim interdum mollis.

Aenean eu fringilla est, vel ultricies nunc. Nunc ex massa, luctus et tellus at, ullamcorper porttitor est. Vivamus commodo facilisis elit, et cursus risus gravida id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo quam, dignissim in tristique id, porta sed metus. Ut orci nibh, feugiat a auctor eu, volutpat sit amet dolor. Pellentesque egestas nunc tincidunt urna dignissim, ac iaculis enim semper. Proin id ex massa. Nunc a lobortis urna. Mauris id felis eleifend enim dapibus consectetur.

Nulla facilisis eros ut nibh iaculis luctus. Maecenas quis neque a lorem tincidunt mollis vitae condimentum quam. Integer varius justo non mauris maximus, ac efficitur nunc sodales. Cras viverra neque ut velit convallis, a porttitor sapien consequat. Fusce non lectus in augue pulvinar rutrum. In sollicitudin lorem vitae tortor faucibus consequat. Ut ac dignissim diam. Vestibulum vel urna nec ipsum finibus pellentesque. Vivamus aliquet massa quis tellus pulvinar, at euismod enim finibus. Vivamus eu quam vitae tellus vestibulum semper. Sed elementum sem ut auctor venenatis. Etiam quis ex augue. Praesent condimentum suscipit dui non pretium.

Curabitur rutrum, enim ultrices hendrerit lobortis, sapien risus bibendum ligula, nec sodales massa nisi sed diam. Nullam tincidunt erat sit amet eros maximus, at pharetra leo fermentum. Sed bibendum dictum magna, sed venenatis massa vulputate lacinia. Proin sollicitudin nibh in arcu consequat malesuada. Ut interdum magna ut mauris dictum auctor. Nullam hendrerit molestie lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eu laoreet nisi. Curabitur ut dignissim nisl. Praesent tempor, ipsum in auctor dapibus, enim mauris hendrerit ipsum, vitae rutrum mi mi sed lectus. Sed ut pretium purus, eget lacinia ligula. Suspendisse ullamcorper ut quam non posuere. Vestibulum molestie elit in magna mattis, lobortis scelerisque sapien lobortis.

fabulist · June 5, 2023

Not-quite-tutorial-but-something-similar:

Quote the post and when you insert the content, click on Source in the editor buttons. You'll see the html source where you can see all the styling shenanigans.

@Malkavian Grin Your bars are breath-taking.

Edited June 5, 2023 by fabulist (see edit history)

Malkavian Grin · June 5, 2023

@fabulist D'aww thank you so much! :3 I prefer minimalist designs, so I tend to remove borders and extra spacing. I also tend to add images when it's not necessary LOL

If you have a particular design in mind let me know and I'll whip something up for you now that I have most of the build out of the way.

Hmm... I should add these to a repository like other people do...

Neopopulas · June 6, 2023

21 hours ago, Malkavian Grin said:

@fabulist D'aww thank you so much! :3 I prefer minimalist designs, so I tend to remove borders and extra spacing. I also tend to add images when it's not necessary LOL

If you have a particular design in mind let me know and I'll whip something up for you now that I have most of the build out of the way.

Hmm... I should add these to a repository like other people do...

I made a forum that, at first, was just testing baldr beta stuff, its now just full of character sheet designs and posting templates and HTML styling templates. It makes things so much easier. I've been playing with animated backgrounds.

90% Health

40% Health

930% Health

57% Health

65% Health

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

Eric · June 6, 2023

fabulist · June 6, 2023

I like the first two, but the rest changes so fast that it hurts my eyes. If there were an animation with 1/5 the speed for the water bar, that would be really cool.

Ok, I gave up gathering all the versions in the first post, I think people can find whatever they want here, this thread isn't too long (yet.)

Is there a standard folder to share user-made creations?

Edited June 6, 2023 by fabulist (see edit history)

Malkavian Grin · June 6, 2023

@Neopopulas Oh nice, I didn't think to try animated stuff! It's a bit too busy for me; like Fabulist I wish they were slower and less involved. It'd be distracting (for me) to try reading a post while also having moving graphics on screen (especially multiples).

One thing that I think would be cool to make (probably have to create from scratch) is a red-line heartbeat kind of thing that changes the more hurt you are (like Resident Evil used to do; I haven't played the newer ones). But, again, see my comment about being too busy.

@fabulist Thanks for trying to wrangle all our stuff together. I don't think there's so much here that people can't just sift through.

Eric · June 6, 2023

3 hours ago, fabulist said:

Is there a standard folder to share user-made creations?

Here, in the Homebrew forum!

Malkavian Grin · June 7, 2023

Just had a new idea for a progress bar using specific small-width graphics that can repeat to look like on-and-off "pips" like you might see on a video game HUD. Don't have time to code it this second, but I'll do it soon.

I don't know that it'll look right full screen, but I like them better as part of a character card anyways.

Neopopulas · June 7, 2023

11 hours ago, fabulist said:

I like the first two, but the rest changes so fast that it hurts my eyes. If there were an animation with 1/5 the speed for the water bar, that would be really cool.

10 hours ago, Malkavian Grin said:

@Neopopulas Oh nice, I didn't think to try animated stuff! It's a bit too busy for me; like Fabulist I wish they were slower and less involved. It'd be distracting (for me) to try reading a post while also having moving graphics on screen (especially multiples).

I pretty much just snatched up the first handful of perfect-loop gifs i could find to see if they worked. I'd absolutely suggest either making your own - there are some good gif creators out there - or picking more specific ones that would fit the theme of whatever you're making.

If you look closely the last one starts to tile at about 50% which i don't like.

Malkavian Grin · June 7, 2023

21 minutes ago, Neopopulas said:

I pretty much just snatched up the first handful of perfect-loop gifs i could find to see if they worked. I'd absolutely suggest either making your own - there are some good gif creators out there - or picking more specific ones that would fit the theme of whatever you're making.

If you look closely the last one starts to tile at about 50% which i don't like.

I actually went ahead and cut my own 200x20px images to use in our Barbarians of Lemuria game for Adhra. I think they look nicer that way and plus they are guaranteed to look that way. I used to have a plugin to make my own gifs with photoshop but I can't seem to figure out how to activate it anymore. Haven't used it in 15+ years.

What gif creators would you suggest? I found one that was absolutely abysmal in options. It was like "do you want your images to blink back and forth? Ta-da!" and I ran away.

I did notice that weird tiling effect. It's because you didn't use background-position:center; which as you can see below is pretty spot on. I think stuff defaults to top. This gif for some reason splits at the top and bottom. Also, you can now see that it doesn't loop right on the edges. Pity.

65% Health

bwatford · June 7, 2023

You should also be able to declare different colors for different progression. I.e. if bar Is full, green, orange at 75%, yellow at 50%, red at 25% etc.

Of course you could probably also just do a gradient red to green.

Neopopulas · June 7, 2023

4 hours ago, Malkavian Grin said:

I actually went ahead and cut my own 200x20px images to use in our Barbarians of Lemuria game for Adhra. I think they look nicer that way and plus they are guaranteed to look that way. I used to have a plugin to make my own gifs with photoshop but I can't seem to figure out how to activate it anymore. Haven't used it in 15+ years.

What gif creators would you suggest? I found one that was absolutely abysmal in options. It was like "do you want your images to blink back and forth? Ta-da!" and I ran away.

I did notice that weird tiling effect. It's because you didn't use background-position:center; which as you can see below is pretty spot on. I think stuff defaults to top. This gif for some reason splits at the top and bottom. Also, you can now see that it doesn't loop right on the edges. Pity.

65% Health

I used to have a program that did it as well back when i was working in tech but since then i've just resorted to online tools. (how long before AI can do it easily?) but none of them do a really steller job. Animate gifs are fun but i think most people would probably hate them in every post 😄

4 hours ago, bwatford said:

You should also be able to declare different colors for different progression. I.e. if bar Is full, green, orange at 75%, yellow at 50%, red at 25% etc.

Of course you could probably also just do a gradient red to green.

My kingdom for a little CSS...

My brain is a little melty today but you COULD use a gradient image and percentage. There is probably a more elegant solution..

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.

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

Text_1	Text_2	Text_3	Bold_1	Accent_1	Mood_1
Warm_1	Warm_2	Warm_3	Bold_2	Accent_2	Mood_2
Cool_1	Cool_2	Cool_3	Bold_3	Accent_3	Mood_3
Bright_1	Bright_2	Bright_3	Bold_4	Accent_4	Mood_4

Html-styled progress bars

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in