100415_0005_small

Pure CSS Progress Bar

by Ivan Vanderbyl Sep 18, 2010
Shot_1284814852
Shot_1284706770_teaser Progress Bar A progress bar design I knocked up on a friday arvo for a waiting page in our application. Inspired by http://dribbble.com/shots/33322-Modal-upload September 17, 2010

This shot is a Rebound of...

Progress Bar

by Ivan Vanderbyl

6 buckets
help 1 rebound
Tweet
5,799 views
http://drbl.in/uPj
Icon-colordrop

Tags

  1. 14
  2. 9
  3. 3
  4. 3
  5. 3
  6. 2
  7. 2
  8. 2

19 Responses

  1. 100415_0005_small Ivan Vanderbyl

    Due to popular demand, here it is in CSS

    http://ivan.ly/ui/

    Enjoy.

    likes

    over 1 year ago

  2. Pro Dc-2012 Dan Cederholm

    Nice use of -webkit-animation to make the stripes happen :)

    over 1 year ago

  3. Pro Me16_square Octave Zangs

    We use the same process in SublimeVideo before the video start :)

    over 1 year ago

  4. Moi3_reasonably_small Gal Koren

    Not to be rude, but it's not pure CSS if you've got the stripes as an image.

    You could draw the stripes in the browser and make it pure CSS.

    over 1 year ago

  5. Pro Brendanf_1000 Brendan Falkowski

    Like the inset box-shadows for the border highlights.

    over 1 year ago

  6. Pro Photo_oct_27__9_07_38_pm_copy Henry Moran

    This is awesome. Would it actually be functional? Meaning there would be progress assuming it was a real web app implementation?

    over 1 year ago

  7. 100415_0005_small Ivan Vanderbyl

    @Henry, I've updated it with some JS to simulate progress.

    Also, now available with added Firefox support :)

    over 1 year ago

  8. 100415_0005_small Ivan Vanderbyl

    @Koren thanks for your feedback, I looked at SVG but ultimately decided it was more weight than using an image, and it's also nothing to do with CSS, so the *Pure CSS* statement would still be slightly tarnished. I'll look into transforming CSS gradients or the likes in place of the image.

    over 1 year ago

  9. Eyes_closed River Brandon

    well done. i was going to hook up a version with ff support, but you beat me to it. dig the animated version, too. nice touch.

    over 1 year ago

  10. 100415_0005_small Ivan Vanderbyl

    @River well almost, If you can figure out FF animations that would be a big help.

    over 1 year ago

  11. 100415_0005_small Ivan Vanderbyl

    All source code is now up on GitHub http://github.com/ivanvanderbyl/ui-progress-bar

    likes

    over 1 year ago

  12. Avatar-default Josh Faul

    Tip: With a little trickery, you can do stripes with webkit gradients -- Ink Stain

    over 1 year ago

  13. Pro Avatar_alternate Paul Jackson

    This works really well in Opera 10.62.

    over 1 year ago

  14. Pro Derek-punsalan Derek Punsalan

    Awesome.

    over 1 year ago

  15. 100415_0005_small Ivan Vanderbyl

    Thanks for the heads up @Josh, I'll patch it shortly.

    over 1 year ago

  16. 100415_0005_small Ivan Vanderbyl

    @Paul, thanks I'll add it to the list.

    over 1 year ago

  17. Dfw David F. Weiss

    Cheers Ivan! This is awesome!

    over 1 year ago

  18. Matthew_anderson

    Shot_1286999297_teaser Uploading files... Upgrading the Onehub uploader to support drag and drop. This is part of the overlay - the progress bar activates once you have dropped your files on to the d... October 13, 2010

    Rebound

    Uploading files...

    by Matthew Anderson

    Upgrading the Onehub uploader to support drag and drop. This is part of the overlay - the progress bar activates once you have dropped your files on to the drop target.

    over 1 year ago

  19. Pro Matthew_anderson Matthew Anderson

    Beautiful!

    The new drag and drop uploader I'm working on seemed like a perfect use case. Thanks for the inspiration!

    over 1 year ago

keyboard shortcuts: ← previous shot → next shot L or F like