23 Sep

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.

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

Sponsors

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?

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

Open Source Resources for Web Application Developers

Pure CSS Progress Bar with Javascript for Animation

Open Source Resources for You

subscribe to our newsletter - weekly free resouces for web developers

follow us on social sites - rss, facebook, google+, Twitter

Open Source Resources for You