# 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](https://deltaclan.gitbook.io/superform/essentials/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**
<div sf-el="progress-bar" class="progress_bar">
<div>
<span sf-react="text($p)">percentage</span>
%</div>
</div>
**Webflow Example**
{% embed url="" %}
{% 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 %}