

I made progress bars using only CSS3. You can use them for free. - jsullivandigs
http://dipperstove.com/design/css3-progress-bars.html

======
samwillis
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.

~~~
billpatrianakos
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.

~~~
samwillis
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.

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

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

~~~
Zirro
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.

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

~~~
tristanperry
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)

------
mappu

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

------
aculver
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!

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

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

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

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

~~~
Apple-Guy
That version is very basic. Dipperstove's version is much better in terms of
design.

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

~~~
talmand
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.

------
jack-r-abbit
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.

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

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

~~~
jsullivandigs
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. :)

------
amerine
Looks sweet!

------
drivebyacct2
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).

