How to rotate shape loader animation using CSS ?

<!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>

Like this post? Please share to your friends:
Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: