Html-styled progress bars

[fabulist]

So, I might sink my own feature request here, but then it takes this off the developers' hands.

Here are some progress bars made by simply styling html div's.

Any thoughts how to make them even fancier? I'm thinking in repeating image backrounds, gradients (currently the editor removes these when saving 😞 ), and whatever else may come to your minds.

 

Simple Progess Bars

I'm going to use the 5/17 progress everywhere, which is 29%.

---

minimalistic

 

---

minimalistic rounded

 

---

no background

 

---

opaque grey background

 

---

no background, visible remaining progress

 

---

white background, visible remaining progress

 

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

[Neopopulas]

There is the <Progress> HTML, but that doesn't work on Baldr right now.

there is also the div 'miniprogressbar'

It would need to be heavily styled of course but it could be easier.

 

 

 

 

 

 

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

[fabulist]

Easy, that's true, but these are not actually progress bars, just bars. Nothing indicates the remaining progress.

[Neopopulas]

Yes, I wish the <progress> would work. It seems a lot of things don't work - probably for good reason - you COULD capture them in a box like so;

This is 20% of a 100% width single-cell table. So you have your progress clearly displayed. And you can just make the cell background different colours if you wanted to.

This scales to the size of the box its in, for example this next one is 85% of a table cell that is 500px

85%

The fact they scale to the cell means that you can do a bunch if you want.

43%	19%
7%	95%
28%	93%
50%

 

 

Health 90%

Mana: 50%

 

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

[bwatford]

@Neopopulas some of those need to be scaled to 100% width as they are broken on mobile.

[Neopopulas]

Hm, interesting. I suppose i always forget that using a static width will always break on mobile, but it also means that you have to always have something extend across the entire page, which isn't always optimal or desired.

I WAS going to say 'well it looks like ass on mobile if its set by px and ass on desktop if its set to 100% so someone has to suck it up' but i though no.. no i'm better than that.

So i went and figured something out.

This is an example posting template that floats an image (admittedly, in a table) to the left, AND has a progress bar in it, AND doesn't break mobile

---

Gharzal Gaeghzro

43%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus volutpat dolor vitae vulputate. Pellentesque mollis lacus nec nunc sagittis laoreet. Quisque sed tellus eget quam posuere feugiat ut ac elit. Praesent posuere sollicitudin dui, quis interdum urna facilisis pharetra. Fusce sollicitudin tortor quis purus auctor, nec sodales eros viverra. Proin luctus blandit neque vitae vehicula. Proin finibus, augue vitae dictum venenatis, nulla justo dictum ante, at dignissim purus urna et mauris. Duis sodales dictum ipsum in mollis. Nunc luctus lorem in orci rutrum ultrices. Nullam vehicula augue ut aliquam pellentesque.

Nunc sit amet nunc id felis luctus interdum in ac neque. Suspendisse molestie nulla tellus, maximus pharetra odio laoreet sed. Curabitur vulputate gravida est, sagittis pulvinar eros ultrices vel. Sed finibus vehicula posuere. Pellentesque dui lacus, cursus et augue et, euismod efficitur dui. Phasellus sed leo mollis, vestibulum nisl id, convallis arcu. Nullam eget maximus tortor.

 

 

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

[bwatford]

Well done.

[Neopopulas]

I haven't figured out how to (or if its even possible because i think the boards are stripping some of the options) to use a floating image and a 100% bar next to it because the bar always overlaps the floating image but we'll see.

[bwatford]

It's going to take a plugin from Eric and some set styling from me to make bars plug n play friendly.

Its on the request list.

[Neopopulas]

Welp you can have ONE bar!
It looks like you can do some stuff at the moment with some playing but most people won't be doing too much until there is a new button to push. On the list is good though.

---

 

43%

 

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

[bwatford]

I do think you have the style though, may add a texture to the fill bar but that is probably the best working style.

[Malkavian Grin]

60% Health

100% Mana

43% Supply

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Cursus vitae congue mauris rhoncus aenean vel elit. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. In nisl nisi scelerisque eu. Sapien eget mi proin sed libero. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Pellentesque id nibh tortor id. Leo integer malesuada nunc vel risus commodo viverra maecenas. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Eget nunc scelerisque viverra mauris in aliquam sem. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Aliquam ut porttitor leo a diam sollicitudin tempor. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Egestas quis ipsum suspendisse ultrices gravida dictum. Vulputate dignissim suspendisse in est ante. Blandit cursus risus at ultrices mi tempus. Accumsan lacus vel facilisis volutpat est velit egestas. Libero id faucibus nisl tincidunt eget.

Scelerisque fermentum dui faucibus in ornare quam viverra. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Aliquam ut porttitor leo a diam. Penatibus et magnis dis parturient. Felis eget nunc lobortis mattis. Suscipit tellus mauris a diam maecenas sed enim. Ut tristique et egestas quis ipsum. Nunc vel risus commodo viverra maecenas accumsan. Fames ac turpis egestas sed tempus. Fermentum dui faucibus in ornare quam viverra.

Phasellus faucibus scelerisque eleifend donec. Id porta nibh venenatis cras sed. Lectus mauris ultrices eros in cursus turpis massa. Semper viverra nam libero justo laoreet sit. Sit amet commodo nulla facilisi nullam. Arcu vitae elementum curabitur vitae nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Tempor id eu nisl nunc. Volutpat blandit aliquam etiam erat velit scelerisque. Ante metus dictum at tempor commodo. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. A cras semper auctor neque vitae tempus. Laoreet suspendisse interdum consectetur libero id faucibus. Id ornare arcu odio ut. Turpis egestas maecenas pharetra convallis posuere morbi leo.

---

As you can see, this design allows for mobile-friendly scaling, whilst also allowing multiple bars.

I decided to throw in some textures just for a mock-up. I actually like it, though these are a bit too large and in your face for my liking.

[Malkavian Grin]

60%

100%

43%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Cursus vitae congue mauris rhoncus aenean vel elit. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. In nisl nisi scelerisque eu. Sapien eget mi proin sed libero. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Pellentesque id nibh tortor id. Leo integer malesuada nunc vel risus commodo viverra maecenas. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Eget nunc scelerisque viverra mauris in aliquam sem. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Aliquam ut porttitor leo a diam sollicitudin tempor. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Egestas quis ipsum suspendisse ultrices gravida dictum. Vulputate dignissim suspendisse in est ante. Blandit cursus risus at ultrices mi tempus. Accumsan lacus vel facilisis volutpat est velit egestas. Libero id faucibus nisl tincidunt eget.

Scelerisque fermentum dui faucibus in ornare quam viverra. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Aliquam ut porttitor leo a diam. Penatibus et magnis dis parturient. Felis eget nunc lobortis mattis. Suscipit tellus mauris a diam maecenas sed enim. Ut tristique et egestas quis ipsum. Nunc vel risus commodo viverra maecenas accumsan. Fames ac turpis egestas sed tempus. Fermentum dui faucibus in ornare quam viverra.

Phasellus faucibus scelerisque eleifend donec. Id porta nibh venenatis cras sed. Lectus mauris ultrices eros in cursus turpis massa. Semper viverra nam libero justo laoreet sit. Sit amet commodo nulla facilisi nullam. Arcu vitae elementum curabitur vitae nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Tempor id eu nisl nunc. Volutpat blandit aliquam etiam erat velit scelerisque. Ante metus dictum at tempor commodo. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. A cras semper auctor neque vitae tempus. Laoreet suspendisse interdum consectetur libero id faucibus. Id ornare arcu odio ut. Turpis egestas maecenas pharetra convallis posuere morbi leo.

Phasellus faucibus scelerisque eleifend donec. Id porta nibh venenatis cras sed. Lectus mauris ultrices eros in cursus turpis massa. Semper viverra nam libero justo laoreet sit. Sit amet commodo nulla facilisi nullam. Arcu vitae elementum curabitur vitae nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Tempor id eu nisl nunc. Volutpat blandit aliquam etiam erat velit scelerisque. Ante metus dictum at tempor commodo. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. A cras semper auctor neque vitae tempus. Laoreet suspendisse interdum consectetur libero id faucibus. Id ornare arcu odio ut. Turpis egestas maecenas pharetra convallis posuere morbi leo.

---

You can also do this with a "character card" style. In my opinion, using it like this requires the card to be wider (this example is 30% of post width). Seems to scale decently well on mobile at this size. Lower percentages will have an issue though. I think the font-size would need to be variable (or push the data into the other side of the "cell" and invert the colors)

[Malkavian Grin]

❤30%

/ 10

Just playing with a design. I don't know how well a progress bar will work at low %'s which includes text. Might just be better without text.

[CharmingSatyr]

This is amazing. Please, somebody, do a tutorial somewhere?