Designs/Battery.html

<!DOCTYPE html>
<html>
  <head>
    <title>Battery | Designs</title>
    <style>
      body{
        background-color: rgb(0, 113, 102);
      }

      .battery{
        position: relative;
        margin: 0 auto;
        margin-top: 20%;
        width: 300px;
        border: 10px solid cyan;
        height: 100px;
        border-radius: 20px;
      }

      .battery:before{
        content: '';
        position: absolute;
        top: 6px;
        left: 6px;
        height: 88px;
        background-color: cyan;
        border-radius: 5px;
        animation: full 5s linear infinite;
      }

      .battery:after{
        content: '';
        position: absolute;
        right: -27px;
        top: 28px;
        width: 20px;
        height: 50px;
        background-color: cyan;
        border-radius: 5px;
      }

      @keyframes full{
        0%{
          width: 0%;
        }
        25%{
          width: 24%;
        }
        50%{
          width: 48%;
        }
        75%{
          width: 72%;
        }
        100%{
          width: 96%;
        }
      }
    </style>
  </head>
  <body>
    <div class="battery"></div>
  </body>
</html>