Pure CSS Progress Bar

19 Responses

  1. Ivan Vanderbyl Ivan Vanderbyl

    Due to popular demand, here it is in CSS

    http://ivan.ly/ui/

    Enjoy.

    likes

    over 3 years ago

  2. Dan Cederholm Dan Cederholm

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

    over 3 years ago

  3. Octave Zangs Octave Zangs

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

    over 3 years ago

  4. Gal Koren 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 3 years ago

  5. Brendan Falkowski Brendan Falkowski

    Like the inset box-shadows for the border highlights.

    over 3 years ago

  6. Henry Moran Henry Moran

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

    over 3 years ago

  7. Ivan Vanderbyl Ivan Vanderbyl

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

    Also, now available with added Firefox support :)

    over 3 years ago

  8. Ivan Vanderbyl 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 3 years ago

  9. River Brandon 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 3 years ago

  10. Ivan Vanderbyl Ivan Vanderbyl

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

    over 3 years ago

  11. Ivan Vanderbyl Ivan Vanderbyl

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

    likes

    over 3 years ago

  12. Josh Faul Josh Faul

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

    over 3 years ago

  13. Paul Jackson Paul Jackson

    This works really well in Opera 10.62.

    over 3 years ago

  14. Derek Punsalan Derek Punsalan

    Awesome.

    over 3 years ago

  15. Ivan Vanderbyl Ivan Vanderbyl

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

    over 3 years ago

  16. Ivan Vanderbyl Ivan Vanderbyl

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

    over 3 years ago

  17. David F. Weiss David F. Weiss

    Cheers Ivan! This is awesome!

    over 3 years ago

  18. 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 3 years ago

  19. 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 3 years ago

keyboard shortcuts: previous shot next shot L or F like