JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="loader"></div>
<!-- <span class="progress">
  <span class="loaded">15</span>
  <span class="">-</span>
  <span class="left">65</span>
</span> -->

CSS

.loader {
  height: 11px;
  width: calc(100% - 40px);
  position: relative;
  overflow: hidden;
  background-color: #d4d4d4;
}
.loaded{
  color: #00b0fc;
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  width: 100px;
  height: 11px;
  background-color: #00b0fc;
  animation: loading 5s linear infinite;
}

@keyframes loading {
    from {left: 0px; width: 1%;}
    to {left: 0%; width: 100%;}
}