---
title: Step 3 - Done
slug: step-3-done
createdAt: 2025-02-11T20:36:41.788Z
---

# Dependencies

Requires wizard.js

# HTML

```html
<div class="modal-background">
    <div class="modal-container _48">
        <div class="wizard-steps-container">
            <div class="wizard-steps">
                <div class="wizard-step completed">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon current-step w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                            <polygon id="inner-path" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                            </polygon></svg></div>
                        <div>
                            <div class="wizard-step-heading">Step 1</div>
                            <div>Upload CSV File</div>
                        </div>
                    </div>
                    <div class="wizard-divider-arrow w-embed"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                        <polygon id="caretPolygon" points="0,0 0,24 12,12" fill="none">
                            <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                            <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                        </polygon></svg></div>
                    <div class="wizard-bottom-border current-step"></div>
                </div>
                <div class="wizard-step completed">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon current-step w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                            <polygon id="inner-path" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                            </polygon></svg></div>
                        <div>
                            <div class="wizard-step-heading">Step 2</div>
                            <div>Map Fields</div>
                        </div>
                    </div>
                    <div class="wizard-divider-arrow w-embed"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                        <polygon id="caretPolygon" points="0,0 0,24 12,12" fill="none">
                            <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                            <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                        </polygon></svg></div>
                    <div class="wizard-bottom-border current-step"></div>
                </div>
                <div class="wizard-step">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon current-step w-embed"><svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path>
                            </svg></div>
                        <div>
                            <div class="wizard-step-heading">Step 3</div>
                            <div>Import Data</div>
                        </div>
                    </div>
                    <div class="wizard-bottom-border current-step"></div>
                </div>
            </div>
        </div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Importing Data</h1>
            <div>Your data is being processed. This might take a few moments, so please be patient.</div>
        </div>
        <div class="csv-importing-message">
            <div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="var(--brand-colors--gray-600)" stroke-width="4" fill="none" opacity="0.25"></circle>
                <path fill="var(--brand-colors--brand-600)" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                <animatetransform attributename="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatcount="indefinite">
                </animatetransform></svg></div>
            <div>Importing, please wait...</div>
        </div>
        <div class="form-button-container">
            <a href="#" class="button full disabled w-button">Please Wait...</a>
        </div>
    </div>
</div>
```