@keyframes test {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

body {
  margin: 0;
  display: grid;
  height: 100dvh;
  place-content: center;
}

.progress-bar {
  width: 50rem;
  border: 0.1rem solid black;
  height: 3rem;
}

.progress {
  animation-name: test;
  animation-duration: 2.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background-color: rgb(76, 175, 80);
  height: 3rem;
}

@media only screen and (max-width: 812px) {
  .progress-bar {
    width: 35rem;
  }
}

@media only screen and (max-width: 570px) {
  .progress-bar {
    width: 19rem;
  }
}