→ Anonymous
→ User Onboarding Progress Steps Section

User Onboarding Progress Steps Section

This Example is contributed by Anonymous, on 31-Mar-2025. It is responsive.

Onboarding Wizard Progress Tracker

<div class="onboarding-container">
  <div class="steps-container">
    <div class="step active">
      <div class="step-number">1</div>
      <div class="step-content">
        <h3>Create Account</h3>
        <p>Set up your username and password</p>
      </div>
    </div>
    <div class="step-connector"></div>
    <div class="step">
      <div class="step-number">2</div>
      <div class="step-content">
        <h3>Personal Details</h3>
        <p>Tell us about yourself</p>
      </div>
    </div>
    <div class="step-connector"></div>
    <div class="step">
      <div class="step-number">3</div>
      <div class="step-content">
        <h3>Preferences</h3>
        <p>Customize your experience</p>
      </div>
    </div>
    <div class="step-connector"></div>
    <div class="step">
      <div class="step-number">4</div>
      <div class="step-content">
        <h3>Confirmation</h3>
        <p>Review and complete</p>
      </div>
    </div>
  </div>
  
  <div class="step-content-area">
    <div class="form-container">
      <h2>Create Your Account</h2>
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" placeholder="Choose a username">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" placeholder="Enter your email">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" placeholder="Create a password">
        </div>
        <div class="form-group">
          <label for="confirm-password">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password">
        </div>
      </form>
    </div>
  </div>
  
  <div class="navigation-buttons">
    <button class="btn btn-back" disabled>Back</button>
    <button class="btn btn-next">Next Step</button>
  </div>
</div>

Related Examples