Home
Cristian
Loading Stepper

Loading Stepper

This tailwind example is contributed by Cristian, on 09-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Cristian

1.1k

3

Fork Fullscreen

<style>
        :root {
            --neutral: #999;
            --success: #28a745;
            --warning: #ffc107;
            --bg: #f0f0f0;
            --fg: #333;
        }
        .icon {
            display: block;
            width: 1.5rem;
            height: 1.5rem;
        }
        .icon-neutral {
            color: var(--neutral);
        }
        .icon-success {
            color: var(--success);
        }
        .icon-warning {
            color: var(--warning);
        }
        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: var(--bg);
            color: var(--fg);
        }
        .loading-steps {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        .loading-step {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .loading-step-info {
            font-size: 0.875rem;
            color: var(--neutral);
        }
    </style>
<body>
    <div class="loading">
        <div class="loading-steps">
            <div class="loading-step">
                <svg class="icon icon-neutral" aria-hidden="true" viewBox="0 0 16 16">
                    <circle fill="currentColor" cx="8" cy="8" r="8"></circle>
                </svg>
                <div>
                    <div class="font-semibold text-lg">Preparing</div>
                    <div class="loading-step-info">Waiting...</div>
                </div>
            </div>
            <div class="loading-step">
                <svg class="icon icon-warning" aria-hidden="true" viewBox="0 0 16 16">
                    <circle fill="none" stroke="currentColor" strokeWidth="2" cx="8" cy="8" r="7"></circle>
                    <circle fill="currentColor" cx="8" cy="8" r="5" clip-path="inset(0 0 50% 0)"></circle>
                </svg>
                <div>
                    <div class="font-semibold text-lg">Downloading</div>
                    <div class="loading-step-info">10 of 50 files prepared</div>
                </div>
            </div>
            <div class="loading-step">
                <svg class="icon icon-success" aria-hidden="true" viewBox="0 0 16 16">
                    <circle fill="currentColor" cx="8" cy="8" r="8"></circle>
                    <polyline
                        fill="none"
                        stroke="#fff"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                        points="4 8 7 11 12 5"></polyline>
                </svg>
                <div>
                    <div class="font-semibold text-lg">Analyzing</div>
                    <div class="loading-step-info">Completed at Jan 9, 2025</div>
                </div>
            </div>
        </div>
    </div>
</body>

Related Examples

List of steps

Author:
Leif99

2 years ago

13.2k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

165
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

1 year ago

2.5k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

12.3k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.4k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.7k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

9 months ago

1.3k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.7k
How does it work?

Author:
Abdul Baset Bappy

4 months ago

404
Tailwind simple stepper component

Author:
Santiago Hernandez

1 year ago

2.8k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

2 years ago

11.3k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12