Thursday, February 9, 2023
HomeSoftware Developmentrotate form loader animation utilizing CSS ?

rotate form loader animation utilizing CSS ?


<!DOCTYPE html>

<html>

  

<head>

    <fashion>

        physique {

            show: grid;

            place-items: middle;

        }

  

        .loader {

            show: flex;

            hole: 0.6rem;

        }

  

        .field {

            width: 50px;

            top: 50px;

            background: #0043bc;

            animation: rotate 3s infinite;

        }

  

        .field:nth-child(2) {

            animation-delay: 0.25s;

        }

  

        .field:nth-child(3) {

            animation-delay: 0.5s;

        }

  

        @keyframes rotate {

            50% {

                remodel: rotate(180deg);

                background: rgb(0, 112, 255);

                background: linear-gradient(90deg,

                                             rgba(0, 112, 255, 1) 45%,

                                             rgba(0, 67, 188, 1) 100%);

            }

        }

    </fashion>

</head>

  

<physique>

    <h1 fashion="shade:inexperienced">

        GeeksforGeeks

    </h1>

    <h2 fashion="shade:inexperienced">

        Minimal form rotating Loader

    </h2>

    <div class="loader">

        <div class="field"></div>

        <div class="field"></div>

        <div class="field"></div>

    </div>

</physique>

  

</html>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments