Support
All support for the Relume is provided through Slack. To get assistance, please join our Slack community and send a preview link of your Webflow project along with a description of your problem to one of our experts. We will review your issue and guide you through a solution.

For account-related issues, please contact support@relume.io.
We're performing some maintenance. If you're experiencing any issues please reach out via Slack
Go to Slack
Your payment method has expired. Update your billing details to regain access to premium features.
Manage Billing
Now open!
Vote on new
Relume components
Vote on what components you'd like to see added to our roadmap next month.
Get started

Loader 2

<div class="relative h-screen overflow-hidden">
  <div
    class="fixed inset-0 z-[9999] flex items-center justify-center bg-neutral-black transition-transform duration-700 ease-in-out translate-y-0"
  >
    <div class="flex flex-col items-center justify-center">
      <span class="text-5xl font-bold text-white">First word</span>
    </div>
  </div>
</div>
"use client";

import { useEffect, useState } from "react";

export const Loader2 = () => {
  const words = ["First word", "Second word", "Third word", "Fourth word"];
  const [currentWordIndex, setCurrentWordIndex] = useState(0);
  const [isExiting, setIsExiting] = useState(false);

  useEffect(() => {
    const wordInterval = setInterval(() => {
      setCurrentWordIndex((prev) => {
        if (prev === words.length - 1) {
          clearInterval(wordInterval);
          setIsExiting(true);
          return prev;
        }
        return prev + 1;
      });
    }, 500);

    return () => {
      clearInterval(wordInterval);
    };
  }, []);

  return (
    <div className="relative h-screen overflow-hidden">
      <div
        className={`fixed inset-0 z-[9999] flex items-center justify-center bg-neutral-black transition-transform duration-700 ease-in-out ${
          isExiting ? "-translate-y-full" : "translate-y-0"
        }`}
      >
        {!isExiting && (
          <div className="flex flex-col items-center justify-center">
            <span className="text-5xl font-bold text-white">{words[currentWordIndex]}</span>
          </div>
        )}
      </div>
    </div>
  );
};
You need to be logged in to view the code.
Get the code
Upgrade your plan to view the code.
Upgrade
Details
Category
Loaders
Last updated
May 29, 2025
React version
18
Tailwind version
3.4
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.