Flowing Loading Bar

flowing-loading-bar.markdown

Flowing Loading Bar

A Pen by ReallyBadDeveloper on CodePen.

License.

index.html

<div>
<div class="border">
  <div class="bar"></div>
</div>
  </div>

style.css

:root {
  --progress: 16%;
  --height: 100%;
}
body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ece1fd;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235b02ea' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.border {
  background-color: black;
  height: 50px;
  border-radius: 30px;
  width: 315px;
  padding: 5px;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 10.5s;
}
.bar {
  background: linear-gradient(to right, rgba(196,94,255,1) 0%, rgba(134,0,224,1) 100%);
  height: var(--height);
  border-radius: 30px;
  width: var(--progress);
  animation-name: load;
  animation-iteration-count: infinite;
  animation-duration: 10.5s;
}
@keyframes load {
  0% {
    width: 16%;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 16%;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(15deg);
  }
  80% {
    transform: rotate(15deg);
  }
  95% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}