This article demonstrates a method for invoking custom JavaScript/HTML/CSS from within a 'Form Builder' component.
The following Web Sites were used as inspiration for this article:
Loading Page
http://atmaworkflow.com/2014/11/03/loading-page/#more-362
Simple JavaScript HTML CSS progress bar
http://ruwix.com/simple-javascript-html-css-slider-progress-bar
The recipe for this method is as follows:
1) Create your JavaScript/HTML/CSS content and reference it from within an 'IncludeHTML' component.
a) Give the 'IncludeHTML' component a unique 'Control ID'. For example: CSS
b) Create a Functionality -> 'Custom Events' entry like this:
onclick = if ( count > 0 ) { drawszlider(100, count); }
NOTE: The 'count' variable is from the project and is "drag & dropped" into the JavaScript.
2) Double-Click in an empty area of the 'Form Builder' panel and create a Behavior -> 'Body Custom Events' entry like this:
onload = document.getElementById('CSS').click();
3) Add an 'Auto Exit Page On Timer' component and set the Refresh interval to (1) second.
The attached 'Progress_IncludeHTML_source.txt' file is the content referenced by the 'IncludeHTML' component.
The attached 'Progress.package' project includes a working example of this method and also includes the stock 'Progress Bar' component for comparison.