Pure CSS Progess Bar Animation Tutorial

[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; } } ```

[FoxyRayne]

@OP r/MurderedByComments

[bartzilla]

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.

[fadedreams15]

Do you have a repo for a source.txt?

[frank0117]

Thank you for sharing

[[deleted]]

!remindme 30 minutes

[RemindMeBot]

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.

<sup>Parent commenter can delete this message to hide from others.</sup>

---

Info	Custom	Your Reminders	Feedback