Adding a Progress Bar

introduction when a form is submitted on siteglide, it may have a wide range of tasks to complete e g signing a user into a secure zone or making a payment sometimes users may have an improved experience if they know the submission is still making progress and has not frozen that's why we've added data attributes to the form which will let you know each time a process is complete you can use these to optimise your user experience they won't tell you how much time the submission will take to complete but they will give the user a sense of continuation and progress the attributes the following data attributes will be added to the \<form> element after the submission button is clicked data s form progress this data attribute will let you know the most recent step that was completed by the form submission data s form progress max this data attribute will let you know the maximum number of submission steps at the time of writing, it is fixed at 8, but this may change in future releases some steps will be counted in this number even if the form completes them instantly e g the secure zone step will be skipped if the form is not a secure zone form you can use css which selects these data attributes to change the user experience of the form full code example the following example displays a progress bar which increments with each submission step that is completed it uses css transitions to create a smooth movement between each discrete step \#progressbar { &#x9;width 100px; &#x9;height 30px; &#x9;background color #ffffff; &#x9;border solid 1px grey; } \#progresscontent { &#x9;width 0%; &#x9;height 30px; &#x9;transition width 0 3s; &#x9;transition timing function ease in out; &#x9;background linear gradient(to left, #e66465, #9198e5); &#x9;overflow hidden; } form\[data s form progress='0'] #progresscontent{ &#x9;width 0%; } form\[data s form progress='1'] #progresscontent{ &#x9;width 10%; } form\[data s form progress='2'] #progresscontent{ &#x9;width 20%; } form\[data s form progress='3'] #progresscontent{ &#x9;width 30%; } form\[data s form progress='4'] #progresscontent{ &#x9;width 40%; } form\[data s form progress='5'] #progresscontent{ &#x9;width 50%; } form\[data s form progress='6'] #progresscontent{ &#x9;width 60%; } form\[data s form progress='7'] #progresscontent{ &#x9;width 80%; } form\[data s form progress='8'] #progresscontent{ &#x9;width 100%; } &#x9;