# Progress Bar

## Setup

**Attribute**: `sf-el = progress-bar`

**Where**: any child `div` inside the Basic Form Container.

**Description**: Designates a `div` element as the progress bar for a Superform-enabled form. Styled in Webflow for design purposes, its `width` is dynamically adjusted by Superform to represent real-time progress through the form steps.

**HTML Example**

{% code title="index.html" %}

```html
<!-- Form Container with Progress Bar -->
<div sf="myForm">
    <form>
        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar" sf-el="progress-bar"></div>
        </div>

        <!-- Step 1 -->
        <div sf-step="step1">
            <!-- Content for Step 1 -->
            <button sf-goto="next">Next</button>
        </div>

        <!-- Step 2 -->
        <div sf-step="step2">
            <!-- Content for Step 2 -->
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

```

{% endcode %}

{% code title="styles.css" %}

```css
.progress-bar {
    height: 10px;
    background-color: #4caf50;
    transition: width 0.3s ease;
}

```

{% endcode %}

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F2CZNy3efrdOSvasf0YDO%2Fsf-el-progress-bar-simple.mp4?alt=media&token=4ec1ff71-b4f7-4790-ab17-7a5f62b0d7f0>" %}

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

* **CSS Transitions**: Apply CSS transitions on the `width` property for smooth visual effects.

* **Synchronization**: Align progress bar animation timings with form step animations and delays for cohesive visual flow.

* **Width calculation**: Superform controls the width to match the form's progress; design your progress bar in Webflow and Superform takes care of the rest.

{% endhint %}