Multi Step Loader

loaders

Sequential asynchronous task progress loader with interactive feedback states.

#loader#step#progress#async

Live Interactive Preview

Pipeline Execution

Compiling TypeScript

Optimizing static chunks

Building server bundles

Deployment complete

Component Source Code

Select language in the dropdown

MultiStepLoader.tsx

1'use client';
2
3import React, { useState, useEffect } from 'react';
4import { CheckCircle2, Loader2 } from 'lucide-react';
5
6export default function MultiStepLoader() {
7  const steps = ['Compiling TypeScript', 'Optimizing static chunks', 'Building server bundles', 'Deployment complete'];
8  const [currentStep, setCurrentStep] = useState(0);
9
10  useEffect(() => {
11    const interval = setInterval(() => {
12      setCurrentStep((prev) => (prev + 1) % steps.length);
13    }, 1800);
14    return () => clearInterval(interval);
15  }, [steps.length]);
16
17  return (
18    <div className="w-full max-w-sm rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-xl">
19      <h3 className="text-sm font-bold text-slate-900 dark:text-white mb-4">Pipeline Execution</h3>
20      <div className="space-y-3">
21        {steps.map((step, idx) => {
22          const isDone = idx < currentStep;
23          const isCurrent = idx === currentStep;
24          return (
25            <div
26              key={step}
27              className={`flex items-center gap-3 text-xs transition-opacity duration-300 ${
28                idx > currentStep ? 'opacity-40 text-slate-400' : 'text-slate-900 dark:text-slate-100 font-semibold'
29              }`}
30            >
31              {isDone && <CheckCircle2 className="h-4 w-4 text-emerald-500 shrink-0" />}
32              {isCurrent && <Loader2 className="h-4 w-4 animate-spin text-blue-500 shrink-0" />}
33              {!isDone && !isCurrent && <div className="h-4 w-4 rounded-full border border-slate-300 dark:border-slate-700 shrink-0" />}
34              <span>{step}</span>
35            </div>
36          );
37        })}
38      </div>
39    </div>
40  );
41}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/loaders/MultiStepLoader.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import MultiStepLoader from '@/components/loaders/MultiStepLoader';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <MultiStepLoader />
7    </main>
8  );
9}