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.
I made progress bars using only CSS3. You can use them for free.
11–20 of 34 posts
Re: I made progress bars using only CSS3. You can use them for free.
#12Not 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.
Re: I made progress bars using only CSS3. You can use them for free.
#13A 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?
Re: I made progress bars using only CSS3. You can use them for free.
#14A 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)
Re: I made progress bars using only CSS3. You can use them for free.
#15I'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.
As a non-designer doing all my own design, I appreciate these "copy paste this nice looking CSS" posts.
Re: I made progress bars using only CSS3. You can use them for free.
#16Also note that there exists a 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 elements?
Re: I made progress bars using only CSS3. You can use them for free.
#17Also note that there exists a 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 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.
Re: I made progress bars using only CSS3. You can use them for free.
#18I'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).
Re: I made progress bars using only CSS3. You can use them for free.
#19Not sure how you'd make the progress bars move without some Javascript.
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)
Re: I made progress bars using only CSS3. You can use them for free.
#20Somewhat similar to the progress bars built by Lea Verou: http://lea.verou.me/polyfills/progress/