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.
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.
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?
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.
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.
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.
