Skip to content

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

CSS loading animation using HTML & CSS |7

    Step 1) Add HTML:

    <!-- CODE BY GS CODE -->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>

    </body>
    </html>
        <!-- CODE BY GS CODE -->
        <style >
    
        body{
          background: red;
          margin: 0;
          padding: 0;
        }
        h3{
          color: #000;
          text-transform: uppercase;
          text-decoration: underline;
          text-decoration-color: #fff;
          text-align: center;
          font-size: 40px;
        }
        .loader{
          width: 80px;
          height: 80px;
          border: 15px solid;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-radius: 50%;
          animation: identifier 2s linear infinite;
        }
    
        .loader, .loader:before{
          position: absolute;
          top:50%;
          left: 45%;
          transform: translate(-50%,-50%);
    
        }
        .loader:before{
          content: "";
          border: 10px solid;
          height: 40%;
          width:40%;
          border: 15px solid;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-radius: 50%;
        }
        @keyframes identifier {
          0%{
            transform: rotate(0deg);
          }
          100%{
            transform: rotate(360deg);
    
          }
    
        }
        </style>