3D Box

This tailwind example is contributed by $@(\/)(\/)¥, 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

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

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

5.8k

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

2 years ago

6k
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

39.5k
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

1 year ago

2.2k
Loading dots
Black Loading dots

Author:
Никита (Whiso)

1 year ago

1.9k
Ripple Animation

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

11 months ago

2.1k
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Author:
Homayoun

5 months ago

714
Spinner rings

Author:
Samuel Dawson

3 years ago

13.2k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.9k
Loading spinner

Author:
Prem..

3 years ago

13.1k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Author:
Abhiraj

1 year ago

2.3k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k
Typewriter effect
using javascript

Author:
Samuel Dawson

3 years ago

42.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components