1
Start
2
Verify
3
Launch
Next
Horizontal Indicator
Horizontal
Interactive horizontal progress stepper with animated track filling, scaling icons, and clean text description anchors.
<div class="premium-horizontal-stepper">
<div class="stepper-track-bg">
<div class="stepper-track-fill" style="width: 50%;"></div>
</div>
<div class="stepper-nodes">
<div class="step-node active">
<span class="node-icon"><i class="fa-solid fa-check"></i></span>
<span class="node-label">Start</span>
</div>
<div class="step-node active">
<span class="node-icon">2</span>
<span class="node-label">Verify</span>
</div>
<div class="step-node">
<span class="node-icon">3</span>
<span class="node-label">Launch</span>
</div>
</div>
</div>
1
Configure Repository
Initialize workspace guidelines and tokens.
2
Style Implementation
Write standard glassmorphism layouts.
3
Automated Deploy
Run Node sidebar connector hooks.
Vertical Progress
Vertical
A timeline checklist stepper ideal for task tracking, setups, and processes. Supports click-to-activate node transitions.
<div class="premium-vertical-stepper">
<div class="vertical-track">
<div class="vertical-fill" style="height: 50%;"></div>
</div>
<div class="vertical-steps">
<div class="v-step active">
<div class="v-node"><i class="fa-solid fa-check"></i></div>
<div class="v-text">
<h4>Configure</h4>
<p>Initialize workspace guidelines.</p>
</div>
</div>
<div class="v-step active">
<div class="v-node">2</div>
<div class="v-text">
<h4>Style</h4>
<p>Write standard glassmorphism.</p>
</div>
</div>
</div>
</div>
Checkout Stepper
Checkout
Premium multi-step shopping checkout visualizer using dual-outline glassmorphism boxes and sleek responsive badges.
<div class="premium-checkout-stepper">
<div class="checkout-track">
<div class="checkout-fill" style="width: 100%;"></div>
</div>
<div class="checkout-steps">
<div class="c-step completed">
<div class="c-badge"><i class="fa-solid fa-truck"></i></div>
<span class="c-label">Shipping</span>
</div>
<div class="c-step completed">
<div class="c-badge"><i class="fa-solid fa-credit-card"></i></div>
<span class="c-label">Payment</span>
</div>
<div class="c-step active">
<div class="c-badge"><i class="fa-solid fa-bag-shopping"></i></div>
<span class="c-label">Confirm</span>
</div>
</div>
</div>
01
Basics
02
Security
03
Deploy
Configure Basic Details
Input primary username, repository parameters, and naming standards to set up the foundation.
Numbered Flow
Horizontal
A minimalist horizontal numbered design flow using glass nodes and an active sliding border underline.
<div class="premium-numbered-flow">
<div class="flow-nodes">
<div class="flow-node active">
<span class="flow-num">01</span>
<span class="flow-title">Basics</span>
</div>
<div class="flow-node">
<span class="flow-num">02</span>
<span class="flow-title">Security</span>
</div>
<div class="flow-underline" style="left: 0%; width: 50%;"></div>
</div>
</div>
Animated SVG Stepper
Animated
Advanced circular progress stepper utilizing fluid SVG dash-offsets and auto-advancing play capabilities.
<div class="premium-animated-stepper">
<svg class="progress-ring" width="120" height="120">
<circle class="ring-bg" cx="60" cy="60" r="50"></circle>
<circle class="ring-fill" cx="60" cy="60" r="50" stroke-dasharray="314.16" stroke-dashoffset="157.08"></circle>
</svg>
<div class="ring-content">
<span class="ring-step-num">2 / 4</span>
<span class="ring-step-name">Verify</span>
</div>
</div>
Discovery
Prototype
Delivery
Next
Timeline Journey
Animated
A stylized wavy timeline path designed using animated SVG bezier curves, responsive floating milestone labels, and smooth state transitions.
<div class="timeline-journey-stepper">
<svg class="journey-track" viewBox="0 0 320 80">
<path class="journey-track-bg" d="M 20 40 Q 95 10, 160 40 T 300 40" fill="none" stroke-width="4"></path>
<path class="journey-track-fill" d="M 20 40 Q 95 10, 160 40 T 300 40" fill="none" stroke-width="4" stroke-dasharray="320" stroke-dashoffset="320"></path>
</svg>
<div class="journey-nodes">
<div class="journey-node completed" style="left: 20px; top: 40px;">
<span class="j-dot"></span>
<span class="j-label">Discovery</span>
</div>
<div class="journey-node active" style="left: 160px; top: 40px;">
<span class="j-dot"></span>
<span class="j-label">Prototype</span>
</div>
<div class="journey-node" style="left: 300px; top: 40px;">
<span class="j-dot"></span>
<span class="j-label">Delivery</span>
</div>
</div>
</div>
Glassmorphic Wizard
Checkout
A multi-step setup card implementing glassmorphism, responsive forms inputs, slide-transition tab sheets, and glowing validation tags.
<div class="glassmorphism-wizard">
<div class="wizard-header">
<span class="wizard-step-tag">STEP 2 OF 3</span>
<h4>Security Credentials</h4>
</div>
<div class="wizard-carousel">
<div class="wizard-slider" style="transform: translateX(-100%);">
<div class="wizard-slide">...</div>
<div class="wizard-slide">...</div>
<div class="wizard-slide">...</div>
</div>
</div>
</div>
Circular Orbit
Animated
A futuristic circular layout with nodes positioned orbitally around a status hub. Shifts the planetary angles on node click.
<div class="circular-orbit-stepper">
<div class="orbit-wheel" style="transform: rotate(-120deg);">
<div class="orbit-node active" style="top: 0%; left: 50%;"><i class="fa-solid fa-shield"></i></div>
<div class="orbit-node" style="top: 75%; left: 93.3%;"><i class="fa-solid fa-server"></i></div>
</div>
<div class="orbit-hub">
<span class="hub-label">SERVER</span>
</div>
</div>
Provision VM cloud server networks, initialize Docker volumes, and set database replicas.
Filter port access, inject secure TLS certs, and establish proxy router policies.
Build bundles, execute integration diagnostics, and deploy straight to live servers.
Accordion Stepper
Vertical
A vertical accordion stepper. Automatically expands selected node parameters while collapsing sibling checklists.
<div class="expandable-accordion-stepper">
<div class="acc-row active">
<div class="acc-header">
<div class="acc-indicator">1</div>
<h4 class="acc-title">Title</h4>
</div>
<div class="acc-body">Detailed checklist text.</div>
</div>
</div>
User Setup
Enter your profile alias to initialize settings.
Bio-Lock
Add fingerprint security protection layers.
Fully Ready
You are now fully configured and launch-ready!
Mobile Swipe Flow
Horizontal
A sleek iOS-style mobile wizard simulation showcasing sliding onboarding panels and dot indicator paginations.
<div class="mobile-swipe-stepper">
<div class="swipe-carousel">
<div class="swipe-slider" style="transform: translateX(-100%);">
<div class="swipe-page">...</div>
</div>
</div>
<div class="swipe-dots">
<span class="swipe-dot active"></span>
<span class="swipe-dot"></span>
</div>
</div>
Dotted Path Stepper
Horizontal
A minimalist horizontal stepper with connected dashed lines and icon-based step indicators.
<div class="premium-dotted-stepper">
<div class="dot-step active">
<div class="dot-icon"><i class="fa-solid fa-cart-shopping"></i></div>
<span>Cart</span>
</div>
<div class="dot-line active"></div>
<!-- More steps... -->
</div>
01
Account Setup
02
Profile Details
03
Verification
Minimal Text Stepper
Vertical
A sleek, typography-focused vertical stepper relying on opacity and clean spacing to indicate progress.
<div class="premium-text-stepper">
<div class="text-step active">
<span class="t-step-num">02</span>
<span class="t-step-label">Profile Details</span>
</div>
</div>
Card-Based Stepper
Horizontal
A modern segmented control style stepper using distinct interactive cards with dynamic glow effects.
<div class="premium-card-stepper">
<div class="card-step active">
<i class="fa-solid fa-pen-nib"></i>
<span>Design</span>
</div>
</div>
Neon Progress Stepper
Animated
A bright, glowing neon progress bar with pulsating active nodes for a futuristic, cyberpunk aesthetic.
<div class="premium-neon-stepper">
<div class="neon-track">
<div class="neon-fill" style="width: 50%;"></div>
</div>
<div class="neon-nodes">
<div class="neon-node active"></div>
<div class="neon-node active"></div>
<div class="neon-node"></div>
</div>
</div>
Order Placed
Dec 12, 10:00 AM
Processing
Dec 13, 02:30 PM
Timeline Steps
Vertical
An elegant vertical timeline stepper ideal for order tracking, complete with descriptive meta data.
<div class="premium-timeline-stepper">
<div class="timeline-step active">
<div class="t-dot"></div>
<div class="t-content">
<h5>Processing</h5>
<p>Dec 13, 02:30 PM</p>
</div>
</div>
</div>