Also note that there exists a HTML5 element: http://www.whatwg.org/specs/web-apps/current-work/#the-progr...
element is better than when it comes to styling and support. Try using instead of or divs.
I made progress bars using only CSS3. You can use them for free.
31–34 of 34 posts
Re: I made progress bars using only CSS3. You can use them for free.
#32Somewhat 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.
Re: I made progress bars using only CSS3. You can use them for free.
#33I'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.
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.
Re: I made progress bars using only CSS3. You can use them for free.
#34I'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.
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?