FileMaker HTML CSS Progress Bar

So, over the past few months I have been obsessed with finding a way to make a CSS progress bar to run via FileMaker’s Webviewer that was easy to setup. I saw a few methods that were really simple and nice. One that was really simple was from Cimbura.com. Another one by Excelisys is really nice.

While there is nothing wrong with these options, I was just really obsessed with find a CSS progress bar to work with my FileMaker projects. Now, keep in mind I know some HTML, and rely on find examples on the web to help learn and get things done faster, so I finally found a very simple approach and with a few FileMaker adjustments, I think I came up with something nice. Download it, give it a try, and have fun.

Download FileMaker_HTML_CSS_ProgressBar

=====================================

Webviewer Syntax

Let ( [

/* Use the percentage variable (Global::data) to trigger a change in the progress bar You can even have some fun with math formula’s to change the colour. There are probably other ways to have fun with this progress bar…its all CSS, with a 1 global field with a few repitions. You could use a $$GLOBAL VARIABLE but then you have to refresh the object every time.

*/

~var = Global::data ;

~r = 50 – ( ~var * 2 );

~g = 125;

~b = ~var * 3 ;

~a = 100 ;

~ref = “rgba ( [##R##] , [##G##] , [##B##] , [##A##])” ; /*TEXT READY FOR SUBSTITUTION*/

~colour = Substitute ( ~ref ;[“[##R##]” ; ~r] ; [“[##G##]” ; ~g] ; [“[##B##]” ; ~b] ; [“[##A##]” ; ~a] ) /*THE SWITCH*/

];

Substitute ( Global::html ; [“[##VALUE##]” ; Global::data] ; [“[##COLOUR##]” ; ~colour] )

)

=====================================

Screen Shot 2015-06-26 at 12.14.36 AM