CSS Progress Bar - 5 Creative Ways To Progress
Let's experiment with how to make the most flexible progress bar HTML and CSS can offer! We'll go over animations, styling the progress value, and show how to hook it all up to JavaScript as well using custom properties.
Chapters:
00:00 Intro
00:44 Accessible Progress Bar HTML
01:58 Styling the Native Progress Element
06:22 Adding % Value With Psudeo Selectors
09:16 Indeterminate Animation State
16:43 Styling a Div
19:37 Creative Solutions for Showing Values
20:07 Clip Path Trick
21:35 Background Property Workaround
23:19 Box Shadow Attempt
24:21 Can We Do This With Grid!?
25:43 The Optimal Solution
28:32 Outro
Helpful Progress Bar Links:
https://developer.mozilla.org/en-US/d...
https://css-tricks.com/html5-progress...
🧠 CSS Tutorials Playlist: • Flexbox CSS for Absolute Beginners
⚔️ CSS Battle Playlist: • Radial Gradient Deep Dive - CSS Battl...
