About this snippet

Guide users through a timeline or process with this vertical stepper. It fits perfectly in sidebars and uses CSS connecting lines to help users track their progress visually.

Size
1.7 KB
Uses
HTML, CSS
Loads
Nothing external
Views
580
<div class="v-stepper">
  <div class="v-step active">
    <div class="v-circle">1</div>
    <div class="v-content">
      <h3>Order Placed</h3>
      <p>We have received your order.</p>
    </div>
  </div>
  <div class="v-step active">
    <div class="v-circle">2</div>
    <div class="v-content">
      <h3>Processing</h3>
      <p>Your items are being packed.</p>
    </div>
  </div>
  <div class="v-step">
    <div class="v-circle">3</div>
    <div class="v-content">
      <h3>Shipped</h3>
      <p>Order is on the way.</p>
    </div>
  </div>
  <div class="v-step">
    <div class="v-circle">4</div>
    <div class="v-content">
      <h3>Delivered</h3>
      <p>Package arrived safely.</p>
    </div>
  </div>
</div>
.v-stepper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.v-step {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 30px;
}
/* Connecting Line */
.v-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
/* Active Line */
.v-step.active:not(:last-child)::after {
  background: #3b82f6;
}
.v-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #9ca3af;
  z-index: 1;
  flex-shrink: 0;
}
.v-step.active .v-circle {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}
.v-content h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #1f2937;
}
.v-content p {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save