Show progress percentage

To add text to a survey which renders the percentage done alongside (or in place of) the progress bar, find and copy the progress.tx file into the local /theme directory by using the Make Local Copy Button:

If this file is not present in the local theme directory, search in the parent theme directory in /system.

The contents of progress.tx will vary depending on the theme in use. This is the progress.tx file from Device Diverse and Modern:

%% if defined($percent_done) {
%% # override the standard because we don't use any "progress:" text, so that we can keep the
%% # progress bar very thin.  Also wrap the table in a div instead of an outer table.
%% #
<div class="i-progress-wrap"><table class="i-progress-table"><tr>
%% if ($percent_done > 0) {
<td class="i-done" width="[% $percent_done %]%"></td>
%% }
%% if ($percent_done < 100) {
<td class="i-todo" width="[% 100 - $percent_done %]%"></td>
%%}
</tr>
</table></div>
%% }

To display the progress bar, the $percent_done system variable is used to define the width of two <td>'s in the table. To display $percent_done on screen, simply add the appropriate HTML elements on screen. In the below example, there's another table below i-progress-table which displays the $percent_done value, along with a % symbol:

%% if defined($percent_done) {
%% # override the standard because we don't use any "progress:" text, so that we can keep the
%% # progress bar very thin.  Also wrap the table in a div instead of an outer table.
%% #
<div class="i-progress-wrap"><table class="i-progress-table"><tr>
%% if ($percent_done > 0) {
<td class="i-done" width="[% $percent_done %]%"></td>
%% }
%% if ($percent_done < 100) {
<td class="i-todo" width="[% 100 - $percent_done %]%"></td>
%%}
</tr>
</table></div>
<table>
<tr>
    <td>[% $percent_done %]%</td>
</tr>
</table>
%% }