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

http://dipperstove.com/design/css3-progress-bars.html

by jsullivandigs • 15 years ago

225 32 15 years ago

amerine• 15 years ago

Looks sweet!

samwillis2• 15 years ago

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.

blindhippo• 15 years ago

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!

joshuamerrill• 15 years ago

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.

araneae• 15 years ago

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

billpatrianakos• 15 years ago

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.

miles_matthias• 15 years ago

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

samwillis2• 15 years ago

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.

dlevine• 15 years ago

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.

moe• 15 years ago

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.

Isofarro• 15 years ago

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?

Flam• 15 years ago

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

rmc• 15 years ago

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

Zirro2• 15 years ago

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.

kushsolitary• 15 years ago

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

aculver• 15 years ago

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!

obituary_latte• 15 years ago

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?

jsullivandigs2• 15 years ago

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

systemizer• 15 years ago

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.

jsullivandigs2• 15 years ago

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

mattking• 15 years ago

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

talmand• 15 years ago

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.

Zirro2• 15 years ago

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)

haberman• 15 years ago

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• 15 years ago

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)

drivebyacct2• 15 years ago

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

jbristowe• 15 years ago

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

Apple-Guy• 15 years ago

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

mappu• 15 years ago

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

kingkilr• 15 years ago

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

jack-r-abbit• 15 years ago

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• 15 years ago

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

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

Related Stories