Spin Loading Animation with CSS

Preview

HTML Code:

        <!DOCTYPE html>
        <html lang="en">
        
        <head>
        
            <title>Spin Loading Animation CSS</title>
        
            <!-- CSS File -->
            <link rel="stylesheet" href="css/style.css">
        
        </head>
        
        <body>
        
            <div class="loader-wrapper">
                <div class="loader loader-outer">
                    <div class="loader loader-inner"></div>
                </div>
            </div>
        
        </body>
        
        </html>

CSS Code:


        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      body {
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #151320;
      }
      
      .loader-wrapper {
          width: 100px;
          height: 100px;
      }
      
      .loader-wrapper .loader {
          width: 100%;
          height: 100%;
          border: 10px solid transparent;
          border-radius: 50%;
          animation: rotate 5s linear infinite;
      }
      
      .loader-wrapper .loader-outer {
          border-top-color: #4bc8eb;
          border-bottom-color: #f13a8f;
      }
      
      .loader-wrapper .loader-inner {
          border-top-color: #36f372;
          border-bottom-color: #fff;
          animation-duration: 4s;
      }
      
      @keyframes rotate {
          0% {
              transform: scale(1) rotate(360deg);
          }
      
          50% {
              transform: scale(.6) rotate(-360deg);
          }
      }

That’s all! I hope, you have successfully created Spin Loading Animation CSS. If you have any questions or suggestions, let me know by comment below. Happy coding 😊

INTERESTING Code

Spin Loading Animation with CSS

Spin Loading Animation with CSS

Preview

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

Spin Loading Animation with CSS

Spin Loading Animation with CSS

Preview

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget