Pure CSS Progess Bar Animation Tutorial

[u/webdep]

https://youtu.be/N-RN8X8G5aI

[u/VinceAggrippino]

This video is worthless. How is it a tutorial if the creator doesn't explain anything?! Where's the source code?

He's not even doing it properly. <progress> is built into HTML... use it...

For example:
demo: Styled Progress Bar 2

HTML

<progress id="progress" value="20" max="100"> 20% </progress>

CSS

progress {
  appearance: none;
  background: white;
  border: none;
  width: 50%;
  height: 1rem;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  border: 10px solid white;
  box-sizing: content-box;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5)
              inset 0 5px 10px rgba(0, 0, 0, 0.2);
}

::-moz-progress-bar {
  animation: color-change 20s infinite;
}

progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  animation: color-change 20s infinite;
}

progress::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
}

@keyframes color-change {
  0% {
    background-color: red;
  }
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  100% {
    background-color: purple;
  }
}

[u/FoxyRayne → u/VinceAggrippino]

@OP r/MurderedByComments

[u/bartzilla → u/VinceAggrippino]

Could you explain the purpose of the ::before and ::after pseudo elements? If I delete them from the example nothing seems to change. Is it for compatibility?

Edit: nvm. I figured it out. Chrome doesn't support the animation property on progress bars, so that's for Chrome's benefit.

[u/fadedreams15]

Do you have a repo for a source.txt?

[u/frank0117]

Thank you for sharing

[u/[deleted]]

!remindme 30 minutes

[u/RemindMeBot → u/[deleted]]

I will be messaging you in 30 minutes on 2019-12-19 16:19:43 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback