3D Box

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

3.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

1 year ago

4.5k
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

30.6k
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 week ago

126
Loading dots
Black Loading dots

Author:
Никита (Whiso)

1 week ago

107
Animated cards

Author:
Prajwal Hallale

2 years ago

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

Author:
Samuel Abera

7 months ago

2.8k
Ovel shaped loading spinner

Author:
Freja Jensen

1 year ago

15k
Animated Info Card
Animated info card

Author:
shivam vishvakarma

1 week ago

46
spineer

Author:
Samuel Abera

1 week ago

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

Author:
Anonymous

1 year ago

10.4k
animate-spin spinner

Author:
Piet Vriend

1 year ago

9k
Custom Loader
Custom loading with different colors

Author:
Deepak Kumar Chouhan

3 weeks ago

38

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components