10% off on all-access. Use code SUPER10.
    d :
    h :
    m :
    Logo

    Multi Step Loader

    A step loader for screens that take a lot of time to load.

    Installation

    Run the following command

    npx shadcn@latest add @aceternity/multi-step-loader

    Props

    Prop NameTypeDefault ValueDescription
    loadingStatesLoadingState[]N/AAn array of objects, each with a text property to display the current loading state message.
    loadingbooleanundefinedA boolean to control whether the loader is active or not.
    durationnumber2000The duration (in milliseconds) before transitioning to the next loading state.
    loopbooleantrueA boolean to control whether the loading states should loop back to the start.
    valuenumber (optional)0(Only in LoaderCore) The current index of the loading state to be displayed.

    Build websites faster and 10x better than your competitors with

    Aceternity UI Pro

    Next.js 15, Tailwind CSS v4 and Motion for react powered templates

    100+ templates and blocks combined

    Ready to copy paste component blocks, save days of development time

    Aceternity UI Pro Demo - Light Mode
    Logo
    Aceternity UI

    Access an ever-growing collection of premium, meticulously crafted templates and Component Blocks.

    A product by Aceternity
    Building in public at @mannupaaji

    © 2026 Aceternity Labs LLC. All Rights Reserved.