Step 4 - Done
Dependencies
Requires wizard.js
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">Import Results</h1>
<div>The import process has completed. Review the table below for the status of each row.</div>
</div>
<div class="table-outline">
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row">
<th>
<div class="table-cell-content">
<div class="table-heading">Row</div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">data</div>
</div>
</th>
<th>
<div class="table-cell-content">
<div class="table-heading">Status</div>
</div>
</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">1</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">John Doe</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data success">Imported</div>
</div>
</div>
</td>
</tr>
<tr class="table-row last-row">
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">{CSV row number}</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">{first column value in row}</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data danger">Import Failed</div>
<div data-tippy-content="Invalid email format" class="help-tooltip w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-area-under">
<a href="#">Download Results</a>
</div>
<div class="form-button-container">
<a href="#" class="button full w-button">Close</a>
</div>
</div>
</div>