Now Loading ... (Line)

by Sasabee

HTML

<body>
  <div class="wrap">
      <span class="base"></span>
      <span class="line"></span>
  </div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}

.wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wrap > span {
    display: inline-block;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
}

.base {
    background-color: rgba(229, 0, 100, 0.3);
}
.line {
    animation: line 1s infinite;
    background-color: #E50064;
}

@keyframes line {
    0% {
        left: -100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}