JQuery & Working With SVG's
I'm working with SVG,
snap.svg library and jQuery so I'm hoping I can find some help here. I have a fluid effect SVG number for my percentage loader which counts from 0-100 and whilst animating, changes the fill percentage of the text. You can see a live demo here.
However, what I need is for everything to work via a variable which goes from 0-100 do do the following;
- Change the percentage value
- Change the loaded fill value
- Change the colour of the loaded fill value (see below)
Side Note: I would also like to change the non-loaded text colour value, I'm extremely new to SVG.
My Colour Tween:
- var ProgressColourTween = [
- "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100"...
- "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00"...
- "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00"...
- "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00"...
- "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100"...
- "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00"...
- "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500"...
- "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000"...
- "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00"...
- "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500"...
- ];
There are 100 different colours tweening from red through to orange and finishing with green. Each line has 10 hex codes which I've shortened to display on one line called via
ProgressColourTween[value]
when looping through from 0-100.
Throughout my revisions and whatnot, my biggest problem has been to be able to change everything based on a global variable and for testing purposes, have a loop which shows a demo alike my live demo with a delayed loading feel.