WebAppers

/ best free open source web resources /

Shopify

Pure CSS Progress Bar with Javascript for Animation

Posted · Category: License Free, Upload

Two years ago, we have built a Javascript Progress Bar. Now, would you like a Pure CSS Progress Bar which requires one image for background stripes only? With simple Javascript for animation, it turned into a really simple and slick progress bar which you can use it anywhere on your website.

Pure CSS Progress Bar is best viewed in a Webkit based browser, Chrome is good, also Safari. Opera 10.62 looks quite good. Firefox and IE 9 kind of work (no animations). IE 8, 7 and 6 do not support rounding, shadows or animation.

css-progress-bar

Requirements: Webkit based browsers
Demo: http://ivan.ly/ui/
License: License Free

6 Comments
  • http://www.synergylaw.be Vincent

    Just FYI: Firefox 4 beta 5 renders it exactly as shown in the image, with animation and shadows. Looks like a winner!

  • chrome?

    chrome shows a bright green 90 degree corner on the curved corner of the bar… no good.

  • http://skunkworks.ivanvanderbyl.com Ivan Vanderbyl

    Hey thanks for sharing this around.

    Chrome for Windows doesn’t properly support inset box shadows (used for the highlight) for some reason it is unable to render them as well as rounded corners.

    Google is aware of this and have contacted me regarding the bug, which they are actively working on fixing.

  • http://www.hambrook.co.nz Rick

    “Because I use a Mac this is not regarded as an issue.”

    I realise this is merely proof-of-concept type fun mini project for you…

    If only we could all use this logic. I wouldn’t need to switch to Windows just to test IE, or use my designer’s Mac to test either. I could just forget about the 99% of people not using Linux. They’re not using exactly what I’m using, so who cares about them, right?

  • http://skunkworks.ivanvanderbyl.com Ivan Vanderbyl

    Hey Rick,

    Thanks for your feedback.

    May I point out two things:
    1. The issue is being worked on and should be fixed soon, this is not a matter of forgetting everyone else in the same way as forgetting every IE user (which I would gladly do)
    2. It’s open source, so by all means fork the project and remove the inset shadow for your own use.

    In no way was there any implied warranty for this to fit a specific purpose, for example: being 100% compatible with every browser used today.

  • http://www.uk-power-battery.co.uk battery online

    I realise this is alone proof-of-concept blazon fun mini activity for you…

    If alone we could all use this logic. I wouldn’t charge to about-face to Windows aloof to analysis IE, or use my designer’s Mac to analysis either. I could aloof balloon about the 99% of bodies not application Linux. They’re not application absolutely what I’m using, so who cares about them, right?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons