Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    My HTML-WPS Office

    Uploaded by

    Crystel
    This document contains the HTML and CSS code for a loading animation. The HTML defines a div container with class "loader". The CSS centers the loader div vertically and horizontally on the page with a black background. It also contains keyframe animations that rotate a green bordered circle and two smaller inner circles with different colors at different speeds to create a loading effect.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    My HTML-WPS Office

    Uploaded by

    Crystel
    14 views2 pages
    This document contains the HTML and CSS code for a loading animation. The HTML defines a div container with class "loader". The CSS centers the loader div vertically and horizontally on the page with a black background. It also contains keyframe animations that rotate a green bordered circle and two smaller inner circles with different colors at different speeds to create a loading effect.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the HTML and CSS code for a loading animation. The HTML defines a div container with class "loader". The CSS centers the loader div vertically and horizontally on the page with a black background. It also contains keyframe animations that rotate a green bordered circle and two smaller inner circles with different colors at different speeds to create a loading effect.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    14 views2 pages

    My HTML-WPS Office

    Uploaded by

    Crystel
    This document contains the HTML and CSS code for a loading animation. The HTML defines a div container with class "loader". The CSS centers the loader div vertically and horizontally on the page with a black background. It also contains keyframe animations that rotate a green bordered circle and two smaller inner circles with different colors at different speeds to create a loading effect.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>loader</title>
    <link rel ="stylesheet" href="style.css">
    </head>
    <body>
    <div class="loader"></div>
    </body>
    </html>
    body{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background: #333;
    }
    .loader{
    border: 4px solid #07da4d;
    width: 68px;
    height: 68px;
    margin: 50px auto 0;
    position: relative;
    animation: animate 2.6s linear infinite;
    }
    .loader:before,
    .loader:after{
    content: '';
    width: 50px;
    height: 50px;
    border: 4px solid #be65e2;
    position: absolute;
    top: 7px;
    left: 7px;
    animation: animate_1 1.3s linear infinite;
    animation-direction: reverse;
    }
    .loader:after{
    width: 96px;
    height: 96px;
    top: -15px;
    left: -15px;
    border:4px solid orange;
    }
    @keyframes animate{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
    }
    @keyframes animate_1{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
    }
    License Terms

    You might also like