/* see https://codepen.io/artboardartisan/pen/VLzKVN */
/* see https://freefrontend.com/css-progress-bars/ */
:root {
  --green: #75b800;
  --gray-light: #eef1f3;


  --bar-size: 8px;
  --bar-radius: 3px;
  --bar-bg: rgba(0, 0, 0, 0.075);
}

body {
  background: var(--gray-light);
}


@keyframes loader {

  0% {
    width: 0;
  }

  20% {
    width: 10%;
  }

  25% {
    width: 24%;
  }

  43% {
    width: 41%;
  }

  56% {
    width: 50%;
  }

  66% {
    width: 52%;
  }

  71% {
    width: 60%;
  }

  75% {
    width: 76%;

  }

  94% {
    width: 86%;
  }

  100% {
    width: 100%;
  }

}


.progress-bar {
  border-radius: var(--bar-radius);
  overflow: hidden;
  width: 100%;

  span {
    display: block;
  }

}

.bar {
  background: var(--bar-bg);
}

.progress {
  animation: loader 8s ease infinite;
  background: var(--green);
  color: #fff;
  padding: var(--bar-size);
  width: 0;
}


.progress-bar {
  left: 50%;
  max-width: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}