MDN has good documentation for the <meter> and <progress> elements.

There's a :indeterminate pseudo class we'd want to style here as well.

CSS Tricks has a good article called HTML5 Progress Element on how you can style these, but it seems like a slippery slope of vendor prefixes to get this styling working consistently across browsers.

CSS Tricks also has an article on the HTML5 Meter Element, but it's a similar story of vendor prefixes.

This seems super worthwhile though - these elements are easy to create in HTML, they're just difficult to style.

We'd love to have someone contribute to this issue! This work could probably be split up into the <meter> and <progress> elements, but it's also okay if you want to take on both at the same time.

To contribute, we'd be looking for you to add a new .scss file in /src/parts/. You'll want to reuse any variables from src/dark.scss or src/light.scss if they make sense, or create and reference new variables if necessary.

There's lots of creative freedom with this issue. Feel free to try something unique, as long as it fits in with the general aesthetic of water.css! I think at minimum we'd be looking for the same rounded corners and similar colors that the themes already use.

Let us know if you need any help or if you have any questions about how to contribute!

I'd like to try to come up with something for the progress bar at least. Thank you for all the resources!

Hey, I wasn't able to get animations working on Chrome, so my original PR is closed until I can figure that out. Here's a link to where I left off in case anyone else happened to be interested.

There was a pull request for this on #128, but it was closed because it used IDs/classes. This is still up for grabs if that pull request doesn't get reopened.

Don't forget that @asoback had an excellent WIP here:
https://github.com/asoback/water.css/blob/progressbar/src/parts/_misc.css

Hi
I want to try and add support for this.
Can you please assign me?

@dimshik100 done- good luck!