Home
$@(\/)(\/)Y
3D Box

3D Box

This tailwind example is contributed by $@(\/)(\/)Y, on 12-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are loading, loader,Transitions

Spinner / Loading Animation

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

5.4k

Fork Fullscreen

<div class="w-full mx-auto h-screen [perspective:1000px] bg-[radial-gradient(rgb(5,_221,_245),_rgb(6,_150,_253))]">
    <div
        class="font-sans sm:h-[250px] sm:w-[250px] xs:h-[150px] xs:w-[150px] absolute sm:top-[30%] sm:left-[30%] xs:top-[40%] xs:left-[30%] [transform-style:preserve-3d] animate-[roll_5s_infinite]">
        <div
            class="box sm:[transform:translateZ(125px)] xs:[transform:translateZ(75px)]">
            Front</div>
        <div
            class="box sm:[transform:translateZ(-125px)] xs:[transform:translateZ(-75px)]">
            Back</div>
        <div
            class="box sm:right-[125px] xs:right-[75px] [transform:rotateY(-90deg)]">
            Left</div>
        <div
            class="box sm:left-[125px] xs:left-[75px] [transform:rotateY(90deg)]">
            Right</div>
        <div
            class="box sm:bottom-[125px] xs:bottom-[75px] [transform:rotateX(90deg)]">
            Top</div>
        <div
            class="box sm:top-[125px] xs:top-[75px] [transform:rotateX(-90deg)]">
            Bottom</div>
    </div>
</div>

Related Examples

Matha ghurainna Ball
Tailwind Spinner

Author:
khalidrootdevs

1 year ago

5.6k
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

37.8k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

8 months ago

1.8k
Loading dots
Black Loading dots

Author:
Никита (Whiso)

8 months ago

1.6k
Ripple Animation

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

6 months ago

1.5k
Card animate

Author:
Raul antonio de la cruz hernandez

7 months ago

1k
Spinner

Author:
Fagundo67

2 years ago

11.3k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

2 months ago

215
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5k
Server Control Center
Server Control Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

194
Square loading spinner

Author:
Freja Jensen

2 years ago

14.4k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

1 year ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components