.progress-wrapper {
  float: left;
  width: 100%;
}
.progress-content {
  width: 80%;
}

.progress-item {
  float: left;
  clear: both;
  width: 200px;
}

.progress-text {
  font-size: 12px;
  color: #AAA;
}

.progress {
  height: 4px;
  background: #e1e4e8;
  overflow: hidden;
}
.progress .progress-bar {
  float: left;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #303242, #303842 17%, #21232e 34%, #00a3a3 51%, #303242 68%, #303842 85%, #21232e);
  background-size: 300% 100%;
  -webkit-animation: progress-animation 2s linear infinite;
          animation: progress-animation 2s linear infinite;
}

@-webkit-keyframes progress-animation {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}

@keyframes progress-animation {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}

@media screen and (max-width: 400px) {
  .progress-item {
    width: 100%;
  }
}