CSS: Animated progress bar

PHOTO EMBED

Mon Aug 29 2022 21:00:02 GMT+0000 (UTC)

Saved by @marcopinero #css

.progress-line, .progress-line:before {
  height: 3px;
  width: 100%;
  margin: 0;
}
.progress-line {
  background-color: #58a700;
  display: -webkit-flex;
  display: flex;
}
.progress-line:before {
  background-color: #2f5400;
  content: '';
  -webkit-animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
content_copyCOPY