Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Chargement MLTCL

    Uploaded by

    léopard 1005 Le gourmand
    This document contains the code for a loading animation. It defines styles for a container and loader elements. The loader elements are circular and colored using gradients. They rotate continuously using keyframe animations, with inner elements scaling down to simulate loading. There are three loaders that animate sequentially to demonstrate a loading effect.

    Copyright:

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

    You might also like

    Chargement MLTCL

    Uploaded by

    léopard 1005 Le gourmand
    6 views2 pages
    This document contains the code for a loading animation. It defines styles for a container and loader elements. The loader elements are circular and colored using gradients. They rotate continuously using keyframe animations, with inner elements scaling down to simulate loading. There are three loaders that animate sequentially to demonstrate a loading effect.

    Original Description:

    Original Title

    chargement mltcl

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the code for a loading animation. It defines styles for a container and loader elements. The loader elements are circular and colored using gradients. They rotate continuously using keyframe animations, with inner elements scaling down to simulate loading. There are three loaders that animate sequentially to demonstrate a loading effect.

    Copyright:

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

    Chargement MLTCL

    Uploaded by

    léopard 1005 Le gourmand
    This document contains the code for a loading animation. It defines styles for a container and loader elements. The loader elements are circular and colored using gradients. They rotate continuously using keyframe animations, with inner elements scaling down to simulate loading. There are three loaders that animate sequentially to demonstrate a loading effect.

    Copyright:

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

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Loader</title>
    <style>
    body {
    background-color: #f1f1f1;
    }
    .container-load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    }
    .loader {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    position: relative;
    margin: auto;
    animation: loader 1.5s infinite ease-in-out;
    }
    .loader:before {
    content: '';
    border-radius: 50%;
    width: 10em;
    height: 10em;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader-inner 1.5s infinite ease-in-out;
    }
    .loader:after {
    content: '';
    border-radius: 50%;
    width: 10em;
    height: 10em;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }
    @keyframes loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    @keyframes loader-inner {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
    }
    .loader:nth-of-type(1):before {
    background: linear-gradient(90deg, #ff5733, #f38c5e, #ffbd69);
    }
    .loader:nth-of-type(2):before {
    background: linear-gradient(90deg, #ffbd69, #f38c5e, #ff5733);
    animation-delay: 0.6s;
    }
    .loader:nth-of-type(3):before {
    background: linear-gradient(90deg, #ff5733, #f38c5e, #ffbd69);
    animation-delay: 0.9s;
    }
    </style>
    </head>
    <body>
    <div class="container-load">
    <div class="loader"></div>
    <div class="loader"></div>
    <div class="loader"></div>
    </div>
    </body>
    </html>

    You might also like