How to Rotate Shape Loader Animation using CSS ?

How to Rotate Shape Loader Animation using CSS ?

Last Updated : 17 Oct, 2024

A rotating shape loader animation in CSS refers to an animated element, such as a circle or square, that spins continuously to indicate loading or processing. This is achieved using the @keyframes rule and CSS properties like transform: rotate() to create smooth, spinning animations.

rotate shape loader animation Preview:

Rotating-shape-loader-animation — rotating shape loader animation

Creating rotating shape loader animation

HTML Structure: It contains a title, heading, and a loader with three .box divs inside a .loader container.
Centering Loader: The body uses display: grid and place-items: center to center content vertically and horizontally.
Loader Design: The .loader uses display: flex with a gap property to evenly space the .box elements.
Rotation Animation: The .box divs use @keyframes rotate to animate a 180-degree rotation continuously every 3 seconds.
Gradient and Delay: Each box has a linear gradient change mid-animation and uses animation delay to create staggered starts.

Example

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: grid;
            place-items: center;
        }

        .loader {
            display: flex;
            gap: 0.6rem;
        }

        .box {
            width: 50px;
            height: 50px;
            background: #0043bc;
            animation: rotate 3s infinite;
        }

        .box:nth-child(2) {
            animation-delay: 0.25s;
        }

        .box:nth-child(3) {
            animation-delay: 0.5s;
        }

        @keyframes rotate {
            50% {
                transform: rotate(180deg);
                background: rgb(0, 112, 255);
                background: linear-gradient(90deg,
                        rgba(0, 112, 255, 1) 45%,
                        rgba(0, 67, 188, 1) 100%);
            }
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2 style="color:green">
        Minimal shape rotating Loader
    </h2>
    <div class="loader">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

Output:

How to Rotate Shape Loader Animation using CSS ?

S

satyamm09

Improve

Article Tags :

Similar Reads

How to make a morph spinner animation using CSS ?

Morphing is the rotating animation of certain objects changing their shape. The changing of shape is called morphing. In this article, we will make a morph spinner that will act as a loading animation by using CSS.This method can also be used to make eye-catching card backgrounds, banners, buttons,

How to shake an image using CSS Keyframe ?

In this article, we will see how to shake an image using CSS Keyframe, along with knowing the different properties used to shake the image, through the code example.A shaking image or shivering effect on the image is used to make the website look more dynamic and attractive. This effect can be appli

How to Create Animation Loading Bar using CSS ?

Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s

How to Design Fade balls loader Animation using CSS ?

Minimal Fading balls loader is a basic CSS animation, where the loader animation will be utilized to engage the user until when a specific page or content is fully get loaded in a particular platform. In this article, we will see how to create a loader animation with three balls animation effect whi

Loading Text Animation Effect using CSS

There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim