Excellent script! Congrats!!!

[inglesuniversal]

Is there a way to add a 3 color gradient to the progress circle as it uploads a file?

UPDATE:

I was able to include the widget as an ID per table row instead of a class... and it works WONDERFULLY.... Now I am having trouble resizing the svg below 100 pixels width and height. Is there a way to force it and make it around 50x50 or 70x70 pixels?

Thanks

[tigrr]

I am sorry for late answer, I didn't get any notification about your issue.

Gradients All the styling is done in CSS. Unfortunately you can't use CSS gradients on SVG elements. You can go a little harder way using SVG gradients. You'll have to first define a gradient in <defs> section inside any <svg> element anywhere on the same page. Then using it like so:

.circle-progress-value { stroke: url("#your-gradient-id"); }

Note that this will create a gradient from one side to another (say top to bottom), not along the stroke.

ID or class selector What went wrong when you included the widget under a class?

Resizing You can resize the SVG to any size by specifying the dimensions on the SVG element itself .my-progressbar-container > svg. Maybe you were specifying them on the container instead. Actually I can see now that the SVG doesn't have it's own class. I'll add a class to it in the next version, so you can target the SVG element directly.

[inglesuniversal]

Thanks and I look forward to the next update!

[tigrr]

@inglesuniversal, thank you.

Can I know what went wrong when you were using a class name instead of an ID?

And please let me know if targeting the SVG element as I described above solves your problem resizing the widget.

[tigrr]

With the latest update, the SVG element now has its own CSS class - "circle-progress". If this fixes your issue...

[inglesuniversal]

I will surely try the update in a few secs. Thanks again for your AWESOME work!!!

[tigrr]

@inglesuniversal thank you!