Skip to content
Related Articles
Open in App
Not now

Related Articles

How to rotate shape loader animation using CSS ?

Improve Article
Save Article
  • Last Updated : 09 Jan, 2023
Improve Article
Save Article

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.


<!DOCTYPE html>
        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%);
    <h1 style="color:green">
    <h2 style="color:green">
        Minimal shape rotating Loader
    <div class="loader">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!