Progress bar in certain areas | Experience Community
Skip to main content
Solved

Progress bar in certain areas

  • August 1, 2023
  • 4 replies
  • 103 views
L
Level 2 ●●
Forum|alt.badge.img+2

Is it possible to add a progress bar for specific sections of a survey (e.g. progress bar for beginning of survey, progress bar for last part of survey separately) or does it have to be the entire experience?

Best answer by TomG

Do you know how the piping or JavaScript options would work?

For piping, if you had an embedded data field ‘percent’ that contained the percentage, you would do this:

<progress id="pbar" style="width:100%" value="${e://Field/percent}" max="100">

To set the value with JavaScript, you would do something like this:

var percent = 50;
jQuery("#pbar").val(percent);

 

    4 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • August 1, 2023

    You can add your own progress bar using a html <progress> tag and either pipe the value or set the value with JavaScript.

    L
    Level 2 ●●
    Forum|alt.badge.img+2
    • LauraS244
    • Author
    • Level 2 ●●
    • August 2, 2023

    Do you know how the piping or JavaScript options would work?

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • Answer
    • August 2, 2023

    Do you know how the piping or JavaScript options would work?

    For piping, if you had an embedded data field ‘percent’ that contained the percentage, you would do this:

    <progress id="pbar" style="width:100%" value="${e://Field/percent}" max="100">

    To set the value with JavaScript, you would do something like this:

    var percent = 50;
    jQuery("#pbar").val(percent);

     

      I
      QPN Level 3 ●●●
      Forum|alt.badge.img+12
      • Imran_Ansari
      • QPN Level 3 ●●●
      • August 2, 2023

      simple and to the point solution TomG, really like this one.

      Terms & ConditionsAccessibility statement