kottenator/jquery-circle-progress

Circle color attribute + IE8 support.

TomThak opened this issue · 6 comments

It would be nice to have circle color attribute. Now it is somehow grey color, which seems to have some opacity. It would be nice to be able to definie your own color. For example I would like to have light red color of the whole circle and the progress will have dark red color. Now everything has to be in grey (due to page background).

Another thing is IE8 support. It would be nice to somehow have IE8 support.
it is still heavily used on WIN XP.

I was able to get these working on IE8 using ES5 Shim (to fill in missing JS methods) https://github.com/es-shims/es5-shim and ExplorerCanvas (to get Canvas working) https://github.com/arv/ExplorerCanvas
It's possible that complex fills won't work, but solid colors definitely do.

Thanks! I will try it. It is not so important for me to have there the animation, but I need to have the page without js errors and this cause an JS error of undefined method for object in IE8.
The best result for me will be if it will display my numbers, texts and circle even without animation for IE8, so there will be the data without error. Animation is an advantage for new browsers.

I have tested it with shim / sham and it gives me another js error like:

jquery.min
< for IE >
es5-sham.min
es5-shim.min
excanvas
< for IE >
circle-progress

(there is a right syntax in fact, but this comment removes script elements)

It shows me:
Object is not able to use method or property bind.
ie8_shime_error_screen01

You can set "background circle" color using emptyFill config option. By default it's transparent gray - rgba(0, 0, 0, .1), but you may set it to red if you want to - #ff0000

As for IE8 support - I have not implemented it because it requires extra effort and would make my code "dirty". You may try to use some IE8 <canvas> polyfill... I will try it and let you know if it works

I don't want to struggle with IE8, I want people to stop using it instead :) I've mentioned this in README.md - I support only IE9+

But I understand your need. Here, take a look at my IE8 example. You may use it if you like it ;)

I've tried excanvas and met a problem - it doesn't want to stroke the circle with gradient fill so I used solid fill fallback.

Maybe you'll find a way how to fix it. Or maybe you'll choose a better polyfill that supports it.

But I suggest to use "graceful degradation" in IE8 instead of polyfill. You will also find it in my example. The idea is to use static image as circle background. And you don't need to patch the lib in this case - just detect IE8, don't use the lib, use alternative CSS instead.

Anyway, good luck! I hope that I helped you a bit

I understand, that you would like people to use better browsers, We also want it, but We cannot somehow force our clients to sell their computers and buy new ones with Win Vista + newer, because They have Win XP in their offices with IE8 and due to google analytics We can see, that there are many customers, who still use IE8. MS should block the Win XP :D

I will try your example. Thanks!

@TomThak @kottenator how did you add thousandth value in your counter?