cc.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <link rel="stylesheet" href="style.css">
    9.     <title>Charge</title>
    10. </head>
    12. <body>
    13.     <section><span></span></section>
    14. </body>
    16. </html>

    style.css

    1. html, body {
    2.     margin: 0;
    3.     height: 100%;
    4.   }
    6.   body {
    7.     display: flex;
    8.     justify-content: center;
    9.     align-items: center;
    10.     background: #ed556a;
    11.   }
    13.   section {
    14.     width: 650px;
    15.     height: 300px;
    16.     padding: 10px;
    17.     position: relative;
    18.     display: flex;
    19.     align-items: center;
    20.     justify-content: center;
    21.     border: 2px solid white;
    22.   }
    24.   span {
    25.     width: 48px;
    26.     height: 96px;
    27.     display: inline-block;
    28.     position: relative;
    29.     color: white;
    30.     border: 3px solid;
    31.     animation: loading 2s linear infinite alternate;
    32.   }
    34.   span::before {
    35.     content: '';
    36.     position: absolute;
    37.     top: -15px;
    38.     left: 6px;
    39.     width: 36px;
    40.     height: 12px;
    41.     background-color: white;
    42.   }
    44.   @keyframes loading {
    45.     0% {
    46.       box-shadow: 0 0 inset
    47.     }
    48.     100% {
    49.       box-shadow: 0 -96px inset
    50.     }
    51.   }

    image.png