I made progress bars using only CSS3. You can use them for free. | Hacker News Reader

I made progress bars using only CSS3. You can use them for free.

dipperstove.com

225 pointsjsullivandigs32 comments

I'm not sure how these are innovative at all as it's just three Div's and some CSS. Yes it does use CSS gradients and box shadows to look a little nicer but this is realy something that can be whipped up in a few lines of CSS. Does it realy warrant a GitHub project? It would be better as a tutorial showing others how to make it from scratch.

The code itself is simple enough to function as a tutorial, no?

I'd much rather wade through the html and css in a github project then try to decode the ramblings of a hastily written tutorial.

I wrote something very similar a couple weeks ago - going to go back and apply some of the nice visual effects this contribution shows - very appreciated!

Hmm, I tend to agree with samwillis. I'm not trying to tear down the contributions of others, but it's worth stating that although the shadows and gradients are nice, there's nothing about these progress bars that requires CSS3.

As a non-designer doing all my own design, I appreciate these "copy paste this nice looking CSS" posts.

Oh come on. Since when are there rules for what warrants a GitHub project? I store a collection of icons on GitHub. It's not really something you'd expect to see on GiHub but it's useful to me and if some else stumbles on it and likes it then it's a bonus. No one claimed these were innovative. You'd be surprised how many people, experienced or not, would find this useful to build on. Don't be a know it all, now. The post is exactly what it says it is and there's really nothing wrong with it. Don't be negative for no reason please.

Agreed Bill. Githib is for anything I want it to be.

Sorry, I wasn't trying to suggest it was not useful at all. I just feel that for something so simple it would be better to show people how to create the same effect as it is using a few simple techniques that are core to web design. I understand that there are a lot of people that find it hard to visually design things and having an example that can be copied is helpfull.

Agreed. I built something like this in a few minutes when it was needed for a recent project. I was looking at Javascript "libraries" to do this, and then realized that it could be done with a tiny bit of CSS.

Does it realy warrant a GitHub project?

Yes!

The sum of these tiny 'do one thing and do it well'-projects improve our collective developer-lives tremendously.

This one may be just 3 lines of CSS. But it has to be the right three lines or it will break on some browsers. And those 3 lines might change in the future to accomodate new browsers.

tldr; Code sharing is good. Do it.

Except it's not succeeding in the "do it well" part. For example, accessibility? It's just two empty divs. No text-equivalent, so it's failing at the most basic level of accessibility. It's an updating widget, where's the ARIA roles to enable constant updates to assistive devices?

What's the rationale for CSS only? Considering progress is about waiting for things to happen, what is the timing based on? What triggers updates or changes?

Seems like an odd thing to have a progress bar, but no JavaScript events or methods to update it. Missing an important abstraction/interface. I'm not seeing the use cases where JavaScript won't be used to update the progress. A meta-refresh?

Also note that there exists a <progress> HTML5 element: http://www.whatwg.org/specs/web-apps/current-work/#the-progr...

The same thought occured to me. Is it possible to style the new <progress> elements?

Mozilla provides a psuedo-element for this. See: https://developer.mozilla.org/en/CSS/%3A%3A-moz-progress-bar

I think Webkit has a similar approach, although I don't know if it provides as much freedom in styling as the -moz-version.

<meter> element is better than <progress> when it comes to styling and support. Try using <meter> instead of <progress> or divs.

A long time ago I thought it would be cool to use CSS as a light-weight drawing framework for things like this. But my local web standards expert told me that CSS is only supposed to be presentation, not content. Is this a legitimate concern, and a reason to avoid this approach?

A progress bar is more presentation than content though?

I guess for usability there should be text inside or underneath saying the % progress? (In which case it'd still be XHTML for content and CSS for presentation)

     <div class="progress" style="width: 40%;"></progress>

What? That should be </div> (From the README.md).

Also seconding the simplicity of the project (i guess new years eve is a low-volume time of the year for submissions, but i wouldn't have expected this to be #5 on the front page.. must have hit all the right buzzwords.)

This is useful. They look great. I recently used SWFUpload to allow customers to upload large files directly to S3 and it works great. However, it provides no UI for keeping users informed about the status of their uploads out of the box. Twitter Bootstrap also doesn't provide anything like this. In that instance I ended up putting something together myself, but I'd have way rather have had something like this to use off the shelf. Thanks!

The CSS code isn't confined to a namespace, which could be a problem. For example, I might want to use .rounded for a global CSS style rather than it refering to only progress bars.

Very good point. I'll put them in a proper namespace.

For people using bootstrap, someone's been working on some nice looking progress bars there: https://github.com/twitter/bootstrap/pull/699

Somewhat similar to the progress bars built by Lea Verou: http://lea.verou.me/polyfills/progress/

That version is very basic. Dipperstove's version is much better in terms of design.

Not sure how you'd make the progress bars move without some Javascript.

I think in the guy's original usage of the progress bars being able to dynamically update is not required. If you can provide the percentage through server-side code then javascript is not required.

If it needed to be a progress bar to show progress of something happening on the page, then javascript would be needed.

Well, there is CSS Animation. However, you could argue that it's not ready for use yet it lacks support in IE9 (IE10 has it) and Opera, plus older versions of other browsers.

(See: https://developer.mozilla.org/en/CSS/animation for further information)

I use progress bars from time to time on quizzes. this is a nice and simple implementation I'll be adding to my bag-o-tricks bookmarks. thanks.

Could you share an example of the quizzes you are doing?

I took Tufte's one day class up in New Haven a couple of months ago. So now you know...

edit: anything you particularly like about him?

I took his one day class a few years ago in Portland. It was great. I like the obsessive level of detail he applies to his craft, down to personally choosing the paper stock for his books.

Also, sparklines. :)

Looks sweet!

I'd love to see more things like this contributed to a reusable SASS library that could be "included" in CSS/SASS sheets that could be processed/cached server side for speed. Reusable components has always been the hardest part of clean CSS (at least for me).

Reply on news.ycombinator.com