<h1 class="title">Battery Charging SVG Animation</h1>
  <div id="battery-container">

    <svg width="462" height="140" viewBox="0 0 462 140" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="440" height="140" fill="black" />
      <rect x="432" y="27" width="30" height="25" fill="black" />
      <rect x="432" y="79" width="30" height="25" fill="black" />
      <rect x="20" y="20" width="400" height="100" fill="#1DCC00" id="battery-charger" />
    </svg>
  </div>
  <!-- Footer starts-->
  <footer>

    <!-- Copyright -->
    <!-- ❤️  -->
    <div class="footer-copyright text-center">&copy; Developed with ❤️</i> by
      <a href="https://grohit.com/" class="white-text" target="_blank">G Rohit</a>. <a href="https://codepen.io/grohit/" target="_blank">Check my other pens </a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer ends-->

  <!-- Developed by http://grohit.com/ -->

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  font-family: Hack, monospace;
  position: relative;
}

.title {
  font-size: 34px;
  margin: 25px;
}
// Battery SVG animation
// 14th Sept 2020

#battery-container {
  // height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  #battery-charger {
    animation: charge 5s linear infinite, colorChange 5s linear infinite;
  }
}

@keyframes charge {
  0% {
    width: 0;
  }
  100% {
    width: 400;
  }
}

@keyframes colorChange {
  0%,
  20% {
    fill: #ff0000;
  }
  30%,
  100% {
    fill: #1dcc00;
  }
}
// footer

footer {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  background-color: #f1f1f1;
  color: #000000;
  text-align: center;

  a {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid;

    &:hover {
      border-bottom: 1px transparent;
    }
  }
}