---
description: Tracks the progress percentage (%) of a multi-step form.
---

# Progress Percentage ($p)



The special `$p` variable tracks the progress percentage of a multi-step form, allowing you to dynamically update elements and provide visual indicators of user progress. Use it to create interactive progress bars, display conditional content, and show completion indicators.

* **Access Progress Percentage**: Retrieve the current progress percentage of the form.
* **Dynamic Updates**: Use the progress percentage to update elements dynamically.



{% hint style="info" %}
**Pro Tip**



Don't forget to check out our native Progress Bar implentation for automatically generating a progress bar.



→ Read about [progress-bar](../progress-bar "mention")


{% endhint %}



***

## Example

Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same — works with Webflow's Custom Element and elements inside Code Embed.



### 1. Update Progress-bar Text



**HTML Example**

<pre class="language-html" data-title="index.html"><code class="lang-html"><strong>&#x3C;div sf-el="progress-bar" class="progress_bar">
</strong> &#x3C;div>
&#x3C;span sf-react="text($p)">percentage&#x3C;/span>
 %&#x3C;/div>
&#x3C;/div>
</code></pre>



**Webflow Example**

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FJlZHKe1LYnLlz3FeywiK%2F%24p_Simple_final.mp4?alt=media&token=f59ac4bd-d44b-46f1-9450-5c009dbae9ce" %}



{% hint style="info" %}
**Pro Tip**



Use the `$p` variable to create interactive and visually engaging forms. Seamlessly integrate it within progress bars, conditional content, and completion indicators for a dynamic user experience.


{% endhint %}

