Jump to content

Html-styled progress bars


Recommended Posts

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 by fabulist (see edit history)
Link to comment
Share on other sites

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 by Neopopulas (see edit history)
Link to comment
Share on other sites

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
spacer.png
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 by Neopopulas (see edit history)
Link to comment
Share on other sites

spacer.png
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.

Link to comment
Share on other sites

spacer.png
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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...