How to rotate shape loader animation using CSS ?

Last Updated : 09 Jan, 2023

Minimal shape rotating loader is a basic CSS animation, where we will make a loader animation with 3 box shapes, & they will be rotated in the right direction by 180 degrees and rotate back to 0 degree & will keep running for an infinite time period. In this article, we will see how to rotate the square shape loader animation using CSS.

Approach: The following approach will be utilized to create shape rotating loader animation, which is described below:

Make the loader with a div with the class name loader.
Make three child span elements for the shape, here we will be making it square-shaped, these are named box.
Style the parent loader element with display flex and gap between the child element with 0.6rem.
Style the box, style the width, height, and background color, and add the animation of rotation with an infinite time period.
Add the animation-delay to the 2nd and 3rd box for a smooth and unique effect.
Make the keyframes at 50% for the rotation of the boxes to 180 degree.

Example: This example describes the shape-rotating loader animation using HTML & CSS.

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>